CanvasContext.bezierCurveTo

解释：创建三次方贝塞尔曲线路径。

方法参数

示例

图片示例

代码示例 1 

在开发者工具中打开

<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：曲线起始点/控制点/终止点 

在开发者工具中打开

<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()
    }
});