CanvasContext.bezierCurveTo

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

方法参数

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1

在开发者工具中预览效果

  1. const canvasContext = swan.createCanvasContext('myCanvas');// Draw quadratic curvecanvasContext.beginPath();canvasContext.moveTo(20, 20);canvasContext.bezierCurveTo(20, 100, 200, 100, 200, 20);canvasContext.setStrokeStyle('black');canvasContext.stroke();canvasContext.draw();

代码示例2 曲线起始点/控制点/终止点

在开发者工具中预览效果

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