CanvasContext.quadraticCurveTo

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

方法参数

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1

在开发者工具中预览效果

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

在开发者工具中预览效果

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