canvas教程

canvas学习心得之路径

字号+ 作者:H5之家 来源:H5之家 2017-07-03 15:01 我要评论( )

刚开始接触canvas的路径时,有些迷糊。 由于我们正常生活的绘画逻辑,或者由于java的GUI编程的影响,我们总是以为绘画就是有纸有笔,直接画出图形就可以了。 这


刚开始接触canvas的路径时,有些迷糊。


由于我们正常生活的绘画逻辑,或者由于java的GUI编程的影响,我们总是以为绘画就是有纸有笔,直接画出图形就可以了。


这纸笔也就是编程环境,这是必不可少的,一般来说,我们就可以直接绘图了,但在canvas的绘图中,虽然也能直接绘制一些图,但是更多的图是通过路径来绘制的。刚开始接触的时候,有好几次都是设置好路径,运行程序,结果界面空白一片,就是没有图出来。经过一些研究,终于对路径有了一点体会。


原来canvas中的路径,就是设置好图画的形状,但并没有显示出来。举个例子,在电视剧中我们经常看到一些人得到了一张藏宝图,但是图上什么东西都看不到。其实上面是有图的,只不过是被隐藏起来的,只要滴点血或滴点墨水等等就能让图显示出来,这隐藏的图就相当于路径,而在canvas中要使路径显示出来,则要用到fill()和stroke()这两个方法,其中,stroke是把图勾勒出来,fill则是把图填充出来。


另外,我们再来说说关于路径的另外两个重要的方法,beginPath()和closePath(),beginPath是用来重置路径的,如果没用这个方法会发生什么事呢,比如说,我们先画一条直线,没用这个方法,就又画一个圆,那么图上就会有两条直线一个圆(其中一条直线覆盖在另一条直线上,因为他们的路径时一样的),如两次绘画采用的颜色不一样,那我们就看不到第一次画的那条直线了。之所以发生这样的事,是因为我们画完直线的时候,它的路径还是存在的,这时我们再创建一个圆的路径,画布上就有一条直线一个圆的路径,之前的路径并没有被清除掉,而解决这种情况就要用到我们的beginPath();这个方法是用来重置路径的,也可以理解为,是用来清除之前的那些路径的,之后我们再设置路径,画布上就只有新创建的路径了,而closePath(),很多人一看,诶,关闭路径,那我关了之前的路径,是不是不用再beginPath()也可以呢,其实呢,这个也坑过我,顾名思义有时真的害人,这个closePath()更准确的说,应该是封闭路径,比如说,你画了一个半圆,没用closePath的话,图上就只有一条弧线,而用了closePath呢,图上就有一条弧线加一条直线,这条直线连接弧线的两个端点,把这个半圆封闭起来。总的来说,closePath就是用来连接路径的最终点与起点的。


一般来说,beginPath和closePath是成对出现的,我们也可以只用beginPath而不用closePath,但是不可以只用closePath而不用beginPath,也就是说,closePath出现的次数应该少于等于beginPath出现的次数。







 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 分区truncate操作的介绍及对全局索引和空间释放影响的案例解析

    分区truncate操作的介绍及对全局索引和空间释放影响的案例解析

    2017-07-03 16:00

  • canvas学习总结三:绘制路径-线段,canvas线段

    canvas学习总结三:绘制路径-线段,canvas线段

    2017-07-03 11:10

  • html5 Canvas裁剪图片

    html5 Canvas裁剪图片

    2017-07-02 14:04

  • 提高canvas性能技巧

    提高canvas性能技巧

    2017-07-02 14:00

网友点评
i