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 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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 UTF8 文件的签名问题
2009/10/30 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
用Python实现职工信息管理系统
2020/12/30 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
旅游网创业计划书
2014/01/31 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
《恐龙》教学反思
2014/04/27 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers