CanvasContext.bezierCurveTo

解釋：創(chuàng)建三次方貝塞爾曲線路徑。

方法參數(shù)

示例

圖片示例

代碼示例 1 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />

Page({
    onLoad() {
        const canvasContext = swan.createCanvasContext('myCanvas');
        // Draw quadratic curve
        canvasContext.beginPath();
        canvasContext.moveTo(20, 20);
        canvasContext.bezierCurveTo(20, 100, 200, 100, 200, 20);
        canvasContext.setStrokeStyle('black');
        canvasContext.stroke();
        canvasContext.draw();
    }
});

代碼示例 2：曲線起始點/控制點/終止點 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />

Page({
    onLoad() {
        const ctx = swan.createCanvasContext('myCanvas')
        // Draw points
        ctx.beginPath()
        ctx.arc(20, 20, 2, 0, 2 * Math.PI)
        ctx.setFillStyle('red')
        ctx.fill()

        ctx.beginPath()
        ctx.arc(200, 20, 2, 0, 2 * Math.PI)
        ctx.setFillStyle('lightgreen')
        ctx.fill()

        ctx.beginPath()
        ctx.arc(20, 100, 2, 0, 2 * Math.PI)
        ctx.arc(200, 100, 2, 0, 2 * Math.PI)
        ctx.setFillStyle('blue')
        ctx.fill()

        ctx.setFillStyle('black')
        ctx.setFontSize(12)

        // Draw guides
        ctx.beginPath()
        ctx.moveTo(20, 20)
        ctx.lineTo(20, 100)
        ctx.lineTo(150, 75)

        ctx.moveTo(200, 20)
        ctx.lineTo(200, 100)
        ctx.lineTo(70, 75)
        ctx.setStrokeStyle('#AAAAAA')
        ctx.stroke()

        // Draw quadratic curve
        ctx.beginPath()
        ctx.moveTo(20, 20)
        ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
        ctx.setStrokeStyle('black')
        ctx.stroke()

        ctx.draw()
    }
});