用Canvas绘制贝赛尔曲线

要创建一个HTML5的画布——贝塞尔曲线，我们可以使用bezierCurveTo()方法。Bezier曲线定义点有两个控制点和一个结束点。与二次曲线相比，Bezier曲线定义有两个控制点，而不是一个，使您能够创建更复杂的曲线。
具体代码如下：

1. context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

复制代码

案例的JavaScript代码：

1. window.onload = function(){
   
2. var canvas = document.getElementById("myCanvas");
   
3. var context = canvas.getContext("2d");
   
4. context.moveTo(188, 130);
   
5. var controlX1 = 140;
   
6. var controlY1 = 10;
   
7. var controlX2 = 388;
   
8. var controlY2 = 10;
   
9. var endX = 388;
   
10. var endY = 170;
    
11. context.bezierCurveTo(controlX1, controlY1, controlX2
    
12. controlY2, endX, endY);
    
13. context.lineWidth = 10;
    
14. context.strokeStyle = "black"; // line color
    
15. context.stroke();
    
16. };

复制代码

关于为什么要使用这些代码，我们用一张图片来解释一下：

贝塞尔曲线的定义是由当前的上下文和两个控制点以及结束点控制的。曲线的第一部分是切向的假想线，是由上下文点和第一个控制点定义。第二部分的曲线相切的假想线，是第二个控制点和结束点定义。



转自我爱猫猫技术博客