1、二次贝塞尔曲线
quadraticcurveto(cpx,cpy,x,y)//cpx,cpy表示控制点的坐标,x,y表示终点坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点p0、p1、p2的函数b(t)追踪:
代码实例:
复制代码
代码如下:
canvas直线
二次贝塞尔曲线
代码效果:
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真是个好玩的东西,上瘾了。