// 获取上下文
const context = wx.createCanvasContext('myCanvas');
// 开始路径
context.beginPath();
// 移动到起始点
context.moveTo(50, 50);
// 绘制三次贝塞尔曲线
context.bezierCurveTo(80, 10, 120, 150, 150, 50);
// 设置描边颜色
context.setStrokeStyle('purple');
// 描边路径
context.stroke();
// 绘图上下文的渲染
context.draw();
在上述代码中,bezierCurveTo 方法接受六个参数:
1. 控制点1的 x 坐标
2. 控制点1的 y 坐标
3. 控制点2的 x 坐标
4. 控制点2的 y 坐标
5. 结束点的 x 坐标
6. 结束点的 y 坐标
这个方法绘制的是起始点、两个控制点和结束点构成的三次贝塞尔曲线。在示例中,我们从起始点 (50, 50) 开始,通过 bezierCurveTo 方法指定了两个控制点 (80, 10) 和 (120, 150),以及结束点 (150, 50)。
你可以根据需要调整参数以绘制不同形状的三次贝塞尔曲线。
转载请注明出处:http://www.zyzy.cn/article/detail/998/微信小程序