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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 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即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
索趣科技的答案
2007/02/07 Javascript
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
Javascript 解疑
2009/11/11 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
基于JavaScript实现选项卡效果
2017/07/21 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
jQuery实现增删改查
2020/12/22 jQuery
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python 必须了解的5种高级特征
2020/09/10 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
个人简历自我评价八例
2013/10/31 职场文书
个人创业事迹材料
2014/12/30 职场文书
休假证明书
2015/06/24 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书