1，二次贝塞尔曲线
quadraticCurveTo（cpx，cpy，x，y）//cpx，cpy表示控制点的坐标，x，y表示终点坐标；
数学公式表示如下：
二次方贝兹曲线的路径由给定点P0，P1，P2的函数B（t）追踪：
代码实例：
复制代码
代码如下：
varcontext=canvas.getContext（'2d'）;//初始化起点，控制点，终点context.beginPath（）;
context.moveTo（20,170）;context.lineTo（130,40）;context.lineTo（180,150）;context.stroke（）;</p><p>//装饰2次贝塞尔曲线context.beginPath（）;context.moveTo（20,170）;context.quadraticCurveTo（130,40,180,150）;context.strokeStyle=“红色”;context.stroke（）;}</script></body></html>
代码效果：
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方向的“长度有多长”。
代码实例：
复制代码
代码如下：
<！DOCTYPEhtml><html><head><metacharset=“utf-8”><title>画布直线</title><metaname=“Keywords”content=“”><metaname=“Description”content=“”><styletype=“text/css”>正文，h1{margin：0;}canvas{margin：20px;}</style></head><bodyonload=“draw（）”><h1>三次贝塞尔曲线</h1><canvasid=“canvas”width=200height=200style=“border：1px固体#ccc;“></canvas><script>函数draw（）{varcanvas=document.getElementById（'canvas'）;varcontext=canvas.getContext（'2d'）;//初始化起点，控制点，终点context.beginPath（）;context.moveTo（25,175）;
context.lineTo（60,80）;context.lineTo（150,30）;context.lineTo（170,150）;context.stroke（）;</p><p>//绘制3次贝塞尔曲线context.beginPath（）;context.moveTo（25,175）;context.bezierCurveTo（60,80,150,30,170,150）;context.strokeStyle=“红色”;context.stroke（）;}</script></body></html>
代码效果图：
是不是很炫酷的效果。。。HTML5+canvas真是个好玩的东西，上瘾了。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60974.shtml
