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实现的tab选项卡代码分享
Dec 09 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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页面间传递参数实例代码
2008/06/05 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
利用Python如何生成随机密码
2016/04/20 Python
Python整数对象实现原理详解
2019/07/01 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
法律工作求职自荐信
2013/10/31 职场文书
便利店投资创业计划书
2014/02/08 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
建议书标准格式
2014/03/12 职场文书
人资专员岗位职责
2014/04/04 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
电子商务求职信
2014/06/15 职场文书
办理护照工作证明
2014/10/10 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
招标保密承诺书
2015/01/20 职场文书
小学元宵节活动总结
2015/02/06 职场文书