CanvasContext.quadraticCurveTo

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

方法参数

示例

图片示例

代码示例 1 

在开发者工具中打开

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

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

        canvasContext.draw();
    }
});

代码示例 2 

在开发者工具中打开

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

Page({
    onReady: function () {
        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.setFillStyle('blue')
        ctx.fill()

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

        // Draw guides
        ctx.beginPath()
        ctx.moveTo(20, 20)
        ctx.lineTo(20, 100)
        ctx.lineTo(200, 20)
        ctx.setStrokeStyle('#AAAAAA')
        ctx.stroke()

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

        ctx.draw()
    }
});