HTML5canvas中beginPath()和closePath()的重要性分析
这篇文章主要介绍HTML5 canvas中beginPath()和closePath()的重要性分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
双塔网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。成都创新互联于2013年开始到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要
先来看一小段代码:
var ctx=document.getElementById("canvas").getContext("2d"); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle="green"; ctx.fill(); ctx.rect(0,0,100,100); ctx.fillStyle="yellow"; ctx.fill();
我们的代码没有错误,但得到的却是两个边长100px的黄色的正方形,而不是一绿一黄,这是为什么呢?
事实上,canvas中的绘制方法(fill,stoke),都会以上一次“beginPath”之后的所有路径进行绘制,在上面的代码中第一个矩形fill了两次,第一次绿色,第二次黄色,所以得到了两个黄色矩形,同样的对于画线段,或其他曲线,图形,不管你moveTo到哪,只要你没有beiginPath,你都是在画一条路径。
如果你画的图形和你想象的不一致,记得查看一下beginPath。
谈到beginPath就不得不提一下closePath,事实上两者并无关系,closePath的意思是关闭路径,不是结束路径,它只是将路径的终点与起点相连,不是开始一个新路径。
我们在上面代码中第一个fill的后面添加一个closePath,得到的仍是两个黄色矩形。
但我们在后面添加一个beginPath,则得到两个不同颜色的矩形。
总而言之,不要试图通过闭合一段路径来开始新的路径,而且如果你不闭合路径,即使开始新的路径,其也不会闭合。
补充:canvas的Beginpath和Closepath理解
beginPath()方法
var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 100.5 , 20.5 ) ; ctx. lineTo ( 200.5 , 20.5 ) ; ctx. stroke ( ) ; ctx. moveTo ( 100.5 , 40.5 ) ; ctx. lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ; ctx. stroke ( ) ;
其中的0.5是为了避免线条模糊问题。那么上面的代码会得到什么样的图形呢?是不是一条黑线一条红线呢?
从代码上看,我们的逻辑毫无问题,但结果是我们得到的是两条红线,并不是一黑一红。
如果你明白这是为什么,那后面的你就不用看了。这就是beginPath的重要性。
canvas中的绘制方法(如stroke,fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。比如上面的代码里面我stroke了两次,其实这两次都是以第一次beginPath后的所有路径为基础画的。也就是说第一条路径我们stroke了两下,第一下是黑的,第二下是红的,所以最终也是红的。
1.不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径。
2.fillRect与strokeRect这种直接画出独立区域的函数,也 不 会打断当前的path.
如果你画出的图形和你想像的不一样,记得查看是否有合理的beginPath.
————————————–
说到 beginPath ,就不得不提到 closePath ,两者是不是有很“紧”的联系呢?答案是 几乎没有关系 。
closePath的意思不是结束路径,而是 关闭 路径,它会试图从当前路径的终点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了!
我们在上面的代码的第一个lineTo后面加上closePath,可以发现还是得到了两条红线。
但如果我们在第一个stroke后面加上beginPath,则会如愿得到一条黑线一条红线。
ctx. stroke ( ) ; ctx. beginPath ( ) ; //注意啦! ctx. moveTo ( 100.5 , 40.5 ) ; ctx. lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ; ctx. stroke ( ) ;
以上是“HTML5 canvas中beginPath()和closePath()的重要性分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享题目:HTML5canvas中beginPath()和closePath()的重要性分析
当前网址:http://scyanting.com/article/ppgoed.html