canvas学习心得之路径

      刚开始接触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出现的次数。





 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章