HTML5中canvas中的beginPath()和closePath()的重要性


Posted in HTML / CSS onAugust 24, 2018

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 ( ) ;

总而言之,就是 不要企图通过闭合现有路径来开始一条新路径 ,而开始一条新路径,以前的路径也不会闭合。
 

HTML / CSS 相关文章推荐
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 #HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 #HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 #HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 #HTML / CSS
html5新特性与用法大全
Sep 13 #HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 #HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 #HTML / CSS
You might like
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
举例详解Python中yield生成器的用法
2015/08/05 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
python线性插值解析
2020/07/05 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2019求职信大礼包
2019/05/15 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书