当前位置:Gxlcms > html代码 > 用Canvas绘制贝赛尔曲线

用Canvas绘制贝赛尔曲线

时间:2021-07-01 10:21:17 帮助过:48人阅读

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

bezier-1.jpg


  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. };


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

bezier-2.jpg



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



转自我爱猫猫技术博客

人气教程排行