canvas 贝萨尔曲线

本文主要是介绍canvas 贝萨尔曲线，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

二次贝塞尔曲线

定义：quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

说明：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath()和 moveTo()方法来定义开始点

语法：context.quadraticCurveTo(cpx,cpy,x,y);

参数：cpx 贝塞尔曲线控制点x坐标；cpy贝塞尔曲线控制点y坐标；

            x 结束点x坐标;结束点y坐标；

数学公式表示如下：

二次方贝兹曲线的路径由给定点P₀、P₁、P₂的函数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 坐标

数学公式表示如下：

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

实现代码如下：

<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

这篇关于canvas 贝萨尔曲线的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---