canvas画曲线图,canvas绘制图形的步骤

　　Canvas2D自己的曲线法

　　最近在研究3D软体的计算，所以在补一些知识。经常涉及一些数值分析，主要是曲线的各种插值算法。突然想起Canvas2D本身也可以画曲线，用的是二次和三次贝塞尔曲线。其实我没用过这个方法，现在就试试吧~

　　本文只讲简单的曲线绘制，很多复杂的原理就不说了。另外，贝塞尔曲线本身的原理非常简单。你看看维基百科就明白了。其实很多简单的曲线绘制工具都是用贝塞尔曲线。如果您在windows自带的绘图工具中使用过该曲线，您会对它很熟悉。你可以先拖动一条直线，然后点击一个位置来扭曲它。开始时，拖动动作是确定曲线的两个顶点，单击动作是添加中间点。windows自带的绘图工具使用三次贝塞尔曲线，可以添加两个中间点。与普通的多项式插值不同，贝塞尔曲线的中点只是作为一个控制点，而不是曲线必须经过的顶点。而且还可以做一个封闭的曲线。Canvas2D提供了两种绘制曲线的方法。

　　二次曲线：二次贝塞尔曲线

　　贝塞尔曲线：三次贝塞尔曲线

　　该线从当前位置开始绘制。您可以使用moveTo方法来指定当前位置。有了曲线的起点位置后，还需要中间点和终点位置。只需将这些位置坐标传递给绘图函数。例如，一条二次贝塞尔曲线需要一个中间点和一个结束位置，因此应该将两个坐标传递给quadraticCurveTo函数。坐标由x和y组成，这意味着这个函数有四个参数。BezierCurveTo是相同的，除了它有两个中间点。让我们来看看吧。

　　代码将内容复制到剪贴板canvas id= canvas width= 200 height= 200 /canvas script varg=canvas . get context( 2d )；//普通直线g . begin path()；g.strokeStyle= # CCCg.moveTo(0，0)；g.lineTo(200，0)；g.lineTo(0，200)；g .莱恩托(200，200)；g .中风()；//贝塞尔曲线g . begin path()；g.strokeStyle= # F00g.moveTo(0，0)；g.bezierCurveTo(200，0，0，200，200，200)；g .中风()；/脚本

　　根据这个之字形轨迹，给出四个点，画出普通的直线和贝塞尔曲线。这只是一条普通的曲线。贝塞尔曲线的伟大之处在于它可以画出一条封闭的曲线，比如这段代码。

　　代码将内容复制到剪贴板g . begin path()；g.strokeStyle= # 00Fg.moveTo(100，0)；g.bezierCurveTo(-100，200，300，200，100，0)；g .中风()；

　　将三次贝塞尔曲线的起点位置和终点位置设置为同一点，就可以画出封闭曲线。因为贝塞尔曲线的插值方向不沿着坐标轴，所以可以画出封闭的曲线。如果要用多项式插值来画封闭曲线，就要改变参数，使用极坐标系统。

　　我用的例子都是三次贝塞尔曲线。其实第二张也是一样的，只是没有中间点，画不出自己想要的东西。我就不再啰嗦了，就到此为止吧==。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。