二次贝塞尔曲线
定义:quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
说明:二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点,第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath()和 moveTo()方法来定义开始点
语法:context.quadraticCurveTo(cpx,cpy,x,y);
参数:cpx 贝塞尔曲线控制点x坐标;cpy贝塞尔曲线控制点y坐标;
x 结束点x坐标;结束点y坐标;
数学公式表示如下:
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
实例代码:
var mycanvas = document.getElementById("mycanvas");
if (mycanvas == null) {
return false;
}
var context = mycanvas.getContext("2d");
//创建二次贝塞尔曲线
//绘制起始点,控制点,终点
context.beginPath();
context.moveTo(20, 170);
context.lineTo(130, 40);
context.lineTo(180, 150);
context.stroke();
//绘制二次贝塞尔曲线
context.beginPath();
context.moveTo(20, 170);
context.quadraticCurveTo(130, 40, 180, 150);
context.stroke();
效果图:
三次贝塞尔曲线
定义:bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点。
说明:三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
语法:context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数:cp1x 第一个贝塞尔控制点的 x 坐标;cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标;cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标;y 结束点的 y 坐标
数学公式表示如下:
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;这两个点只是在那里提供方向资讯。P0和P1之间的间距,决定了曲线在转而趋进P3之前,走向P2方向的“长度有多长”。
实现代码如下:
<span style="font-family:Comic Sans MS;font-size:12px;"> //创建三次贝塞尔曲线
//创建控制点
context.beginPath();
context.moveTo(225, 175);
context.lineTo(260, 80);
context.lineTo(350, 30);
context.lineTo(370, 150);
context.stroke();
//创建三次贝塞尔曲线
context.beginPath();
context.moveTo(225, 175);
context.bezierCurveTo(260, 80, 350, 30, 370, 150);
context.stroke();</span>
效果图如下:
转载自:http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html