canvas效果案例：贝塞尔曲线

本文主要是介绍canvas效果案例：贝塞尔曲线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

绘制二次贝塞尔曲线

ctx.quadraticCurveTo(x1, y1, x, y);
从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(x1, y1)作为控制点ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
// 起始点
ctx.moveTo(100, 400);//（从上一点）
ctx.quadraticCurveTo(200, 500, 300, 400);
ctx.stroke();

绘制三次贝塞尔曲线

ctx.bezierCurveTo(x1, y1, x2, y2, x, y)
从上一个点开始绘制一条曲线，到(x, y)为止，并且以(x1, y1)和(x2, y2)为控制点ctx.beginPath();
// 线的颜色， 线的粗细
ctx.strokeStyle = 'blue';
ctx.lineWidth = 4;
// 起始点
ctx.moveTo(100, 300);//（从上一点）
ctx.bezierCurveTo(150, 250, 250, 350, 300, 300);ctx.stroke();ctx.beginPath();
ctx.fillStyle = 'red';
ctx.font = '14px bold';
ctx.textAlign = 'center';// 起始点
ctx.moveTo(100, 300);
ctx.fillText('(100, 300)', 100, 330);
ctx.arc(100, 300, 4, 0, 2 * Math.PI);// 控制点1
ctx.moveTo(150, 250);
ctx.fillText('(150, 250)', 150, 230);
ctx.arc(150, 250, 4, 0, 2 * Math.PI);// 控制点2
ctx.moveTo(250, 350);
ctx.fillText('(250, 350)', 250, 380);
ctx.arc(250, 350, 4, 0, 2 * Math.PI);// 结束点
ctx.moveTo(300, 300);
ctx.fillText('(300, 300)', 300, 330);
ctx.arc(300, 300, 4, 0, 2 * Math.PI);ctx.fill();

这篇关于canvas效果案例：贝塞尔曲线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---