关于绘制线条,我们还能提供很多有创意的方法。不过,现在应该进一步学习稍复杂点的图 形:路径。html5 canvas api中的路径代表你希望呈现的任何形状。本章对角线示例就是一条 路径,你可能已经注意到了,代码中调用beginpath就说明是要开始绘制路径了。实际上,路径 可以要多复杂有多复杂:多条线、曲线段,甚至是"f路径。如果想在canvas上绘制任意形状, 那么你需要重点关注路径api。


    按照惯例,不论开始绘制何种图形,第一个需要调用的就是beginpath。这个简单的函数不 带任何参数,它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说,beginpath 函数最大的用处是canvas需要据此来计算图形的内部和外部范围,以便完成后续的描边和填充。


    路径会跟踪当前坐标,默认值是原点。canvas本身也跟踪当前坐标,不过可以通过绘制代码 来修改。


    调用了 beginpath之后,就可以使用context的各种方法来绘制想要的形状了。到目前为止, 我们已经用到了几个简单的context路径函数。

mveto(xf y):不绘制,只是将当前位置移动到新的目标坐标(x,y)。


lineto(x, y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。

    简而言之,上面两个函数的区别在于:moveto就像是提起画笔,移动到新位置,而llneto 告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。不过,再次提醒一下,不管调用它们哪 一个,都不会真正画出图形,因为我们还没有调用st「oke或者fhl函数?目前,我们只是在定 义路径的位置,以便后面绘制时使用。


    下一个特殊的路径函数叫做closepath。这个函数的行为同llneto很像,唯一的差别在干 closepath会将路径的起始坐标自动作为目标坐标。closepath还会通知canvas当前绘制的图形 已经闭合或者形成了完全封闭的区域,这对将来的填充和描边都非常有用。


    此时,可以在已有的路径中继续创建其他的子路径,或者随时调用begi npath重新绘制新路 径并完全淸除之前的所有路径。


    跟了解所有复杂系统一样,最好的方式还是实践。现在,我们先不管那些线条的例子,使用 html5 canvas api开始创建一个新场r景一带有长跑跑道的树林。权且把这个图案当成是我们 长跑比赛的标志吧。同其他的画图方式一样,我们将从基本元素开始。在这幅图中松树的树冠最 简单9代码淸单2-8演示了如何在canvas上绘制一顆松树的树冠。

 

 

0
选择一个心情
网站建设 网站制作 网页设计 网站建设公司 沈阳网站建设 沈阳网页设计 高端网站设计 沈阳网站制作公司 高端网站建设 沈阳网络公司 沈阳网站制作
沈阳易势科技有限公司 © 2006-2013 , all rights reserved. 辽b2-20150173-8号 "));
网站地图