用Canvas绘制贝赛尔曲线

时间：2016-02-29
要创建一个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



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



转自我爱猫猫技术博客

上一篇：HTML5实现的Loading缓冲效果 下一篇：详解微博发言框的@功能

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权