HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 用Canvas绘制贝赛尔曲线

用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. };
复制代码

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



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



转自我爱猫猫技术博客

【用Canvas绘制贝赛尔曲线】相关文章

1. 用Canvas绘制贝赛尔曲线

2. HTML Canvas绘图使用详解

3. 浅谈如何使用HTML5的Canvas绘图

4. HTML5开发之Canvas绘图之实战入门

5. CSS3 box-shadow实现曲线投影效果

6. 用CSS3绘制新浪微博logo

7. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形

8. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形

9. HTML5每日一练之Canvas标签的应用-绘制矩形

10. HTML5每日一练之Canvas标签的应用-绘制圆形

本文来源:https://www.51html5.com/a641.html

点击展开全部

﹝用Canvas绘制贝赛尔曲线﹞相关内容

「用Canvas绘制贝赛尔曲线」相关专题

其它栏目

也许您还喜欢