欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用canvas绘制贝塞尔曲线_html5教程技巧

程序员文章站 2022-03-21 17:55:57
...
1、二次贝塞尔曲线

  quadraticCurveTo(cpx,cpy,x,y)  //cpx,cpy表示控制点的坐标,x,y表示终点坐标;

数学公式表示如下:

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:

使用canvas绘制贝塞尔曲线_html5教程技巧

使用canvas绘制贝塞尔曲线_html5教程技巧

代码实例:


复制代码
代码如下:





canvas直线





二次贝塞尔曲线






代码效果:

使用canvas绘制贝塞尔曲线_html5教程技巧

2、三次贝塞尔曲线

  bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  //cp1x,cp1y表示第一个控制点的坐标,cp2x,cp2y表示第二个控制点的坐标,x,y表示终点的坐标;

数学公式表示如下:

P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。

使用canvas绘制贝塞尔曲线_html5教程技巧

使用canvas绘制贝塞尔曲线_html5教程技巧

代码实例:


复制代码
代码如下:





canvas直线





三次贝塞尔曲线






代码效果图:

使用canvas绘制贝塞尔曲线_html5教程技巧

是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西,上瘾了。