用HTML5的画布绘制曲线的一种简单方法

本文主要介绍用HTML5的画布绘制曲线的简单方法，这是HTML5入门学习的基本知识，需要的朋友可以参考一下。
canvas2d曲线的方法
在对三维柔性体的计算研究，有些知识是被修理是经常参与一些数值分析，主要是各种插值算法的曲线。它是突然想起canvas2d本身也可以画曲线，利用两和三次贝兹曲线。事实上，我还不会用很长时间。现在试试看。
这只是一个简单的曲线图，我并没有说很多复杂的原理，除了贝兹曲线的原理本身很简单，看一下维基百科就可以理解了。事实上，许多绘图工具中简单曲线的绘制是基于贝兹曲线的。如果你在Windows画图工具使用的曲线，你必须熟悉它们。你可以拖动直线，然后单击的位置成一条直线扭曲，拖动开始是确定曲线的两个顶点，单击操作是添加的中间点。绘图工具在Windows使用三贝兹曲线，你可以添加两个中间点，贝兹曲线是不同于一般的多项式插值，其中间点只是用来作为控制点，不是曲线必须通过顶点，也可以让一个封闭的曲线，有canvas2d绘制在两方法
QuadraticCurveTo：两个贝兹曲线
BezierCurveTo：三贝兹曲线
该线是从当前位置绘制和moveTo方法可用于指定当前位置。与曲线的开始，也有一个中间点和结束的位置。通过这些位置坐标绘图功能。例如，两个贝兹曲线需要一个中间点和结束位置，所以两坐标传递给quadraticcurveto功能。坐标是由X和Y，这意味着该功能有4 parameters.beziercurveto是相同的，但它有两个中间点。现在让我们用它来看看
CSS代码将内容复制到剪贴板。

var g = canvas.getcontext（2D）；
/普通行
G.beginPath（）；
g.strokestyle =# CCC；
G.moveTo（0,0）；
G.lineTo（200,0）；
（0200）g.lineto；
G.lineTo（200200）；
G.stroke（）；
贝兹曲线
G.beginPath（）；
g.strokestyle =# F00 ；
G.moveTo（0,0）；
G.bezierCurveTo（200,0，0200, 200200）；
G.stroke（）；

这个Z形轨道给出四点，画出普通直线和贝兹曲线，这只是一条普通曲线，而贝兹曲线是如此之大，以至于它能画出一条闭合的曲线，如一段代码。
CSS代码将内容复制到剪贴板。
G.beginPath（）；
g.strokestyle =# 00f ；
G.moveTo (100,0);
G.bezierCurveTo（100200, 300200，100,0）；
G.stroke（）；

封闭曲线可以通过设置起始位置和结束位置三贝兹曲线绘制到同一点。因为贝兹曲线插补方向不是基于坐标轴，封闭的曲线可以得出。如果我们想走出封闭的曲线进行多项式插值，我们有转换参数和使用极坐标系来做。
所有我使用的例子都是三贝兹曲线，事实上，这两个时间是一样的，只是缺少一个中间点不能画我想要的。