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 相关文章推荐
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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
php中计算程序运行时间的类代码
2012/11/03 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Prototype Function对象 学习
2009/07/12 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
js实现碰撞检测
2021/01/29 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python压缩和解压缩zip文件
2015/02/14 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python从入门到精通(DAY 1)
2015/12/20 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python如何实现异步调用函数执行
2019/07/08 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Python3常见函数range()用法详解
2019/12/30 Python
tensorboard显示空白的解决
2020/02/15 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
出国签证在职证明
2014/01/16 职场文书
植树节标语
2014/06/27 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
四风查摆剖析材料
2014/10/10 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android