路径绘图
宁波网站建设认为在Canvas中创建路径绘图的过程与在纸上画画类似：你将笔放在纸的某个点上，开始画，提起笔，然后在纸上的另一个点又开始画。画出的内容可以是简单线条、复杂曲线，或者是由这些组成的多边型。一个简化例子演示如何将写出一个A字的过程转变为Canvas路径绘图命令：
context.beginPath();context.moveTo(00)；context.lineTof00);context.lineTo(900i)；context.moveTo(00)；context.lineTot00)；context,stroke()。
仔细研究源代码，你可以发现创建路径绘图的3个步骤。
1.用beginPath()初始化路径。
2.用moveTo()和lineTo()定义路径轨迹。
3.用stroke()画线。
每个路径绘图都由beginPathO初始化，并可包括任意数鱟的片段。在我们的案例中，我们用moveToO及HneToO来模仿手部动作，定义出字母A的各个笔画片段，最后使用stroke()在画布上绘制出路径。
路径绘图中的片断是否应被分割为几个独立部分完全由布局决定。每条路径的格式都是相同的，这意味着如果需要把字母A的一横设置成不同的颜色，则需要定义两条独立的路径。
让我们来详细了解一下绘制路径的主要方法。
线条
在字母A的例子中，我们使用了Canvas的lineToO方法来创建线条：context.lineTo(x,y)这一方法可以口头表述为“一条到点x/y的线”。这也意味着我们已通过moveToO定义了一个起点，或在之前的绘制已经形成了一个终点。画线结束后，坐标x/y成为当前点。
m所有用来演示路径绘图的图示中，我们都采用浅灰色标记起点xO/yO.并用粗Wja体标记新的当前点。
B6zier曲线
Canvas支持两种B6zier曲线(贝塞尔曲线)：二次方贝塞尔曲线及三次方贝塞尔曲线，bezierCurveToO并非绘制后者的唯一方法。图演示了二次方贝塞尔曲线，图演示了三次方贝塞尔曲线。
context.quadraticCurveTo(cpx,cpy,x,y)
context.bezierCurveTo(cplx,cply,cp2x,cp2y,x,y)为创建Bteier曲线，我们需要一个以当前点为起始坐标、一个目标坐标，以及根据曲线类型决定的一到两个控制点。无论是二次方还是三次方曲线，曲线完成后坐标x/y都将成为新的当前点。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
