CanvasContext.quadraticCurveTo

解釋：創(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.quadraticCurveTo(20, 100, 200, 20);
        canvasContext.setStrokeStyle('blue');
        canvasContext.stroke();

        canvasContext.draw();
    }
});

代碼示例 2 

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

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