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 Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 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
php采集速度探究总结(原创)
2008/04/18 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
js读取本地文件的实例
2017/12/22 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python读取txt某几列绘图的方法
2018/10/14 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
七一党日活动总结
2014/07/08 职场文书
2015年科协工作总结
2015/05/19 职场文书
关于五一放假的通知
2015/08/18 职场文书
小数乘法教学反思
2016/02/22 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
python使用torch随机初始化参数
2022/03/22 Python