beginPath这个canvas函数我很早就讲过了,他的作用很简单,就是开始一段新路径,我们先来看下面的一小段代码:

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();

上面的代码会得到什么样的图形呢?是不是一条黑线一条红线呢?

从代码上看,我们的逻辑毫无问题,但结果是我们得到的是两条红线,并不是一黑一红。

如果你明白这是为什么,那后面的你就不用看了。这就是beginPath的重要性。

canvas中的绘制方法(如stroke,fill),都会以“上一次beginPath”之后的所有路径为基础进行绘制。比如上面的代码里面我stroke了两次,其实这两次都是以第一次beginPath后的所有路径为基础画的。也就是说第一条路径我们stroke了两下,第一下是黑的,第二下是红的,所以最终也是红的。

  1. 不管你用moveTo把画笔移动到哪里,只要不beginPath,那你一直都是在画一条路径。
  2. fillRect与strokeRect这种直接画出独立区域的函数,也不会打断当前的path.

如果你画出的图形和你想像的不一样,记得查看是否有合理的beginPath.

说到beginPath,就不得不提到closePath,两者是不是有很“紧”的联系呢?答案是几乎没有关系。

closePath的意思不是结束路径,而是关闭路径,它会试图从(MoveTo点之后)当前路径的终点连一条路径到起点,让整个路径闭合起来。但是,这并不意味着它之后的路径就是新路径了!

我们在上面的代码的第一个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();

总而言之,就是不要企图通过闭合现有路径来开始一条新路径,而开始一条新路径,以前的路径也不会闭合。

 var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5, 20.5);
ctx.lineTo(200.5, 20.5); ctx.moveTo(110.5, 25.5);
ctx.lineTo(210.5, 25.5);
//ctx.stroke();
//ctx.beginPath();
//ctx.moveTo(100.5, 40.5);
ctx.lineTo(200.5, 40.5)
ctx.strokeStyle = '#f00';
ctx.closePath();
ctx.stroke();

结果如下:

ctx.moveTo(110.5, 25.5);与ctx.lineTo(200.5, 40.5)进行链接。

HTML5 CANVAS画图 beginPath和closePath的更多相关文章

  1. canvas的beginPath和closePath分析总结,包括多段弧的情况

    参考博文: Html5 canvas画图教程17:论beginPath的重要性 先看两个例子 例1: <canvas id="myCanvas" width="30 ...

  2. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  3. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  4. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  5. html5 Canvas画图3:1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  6. 关于beginPath()和closePath()的关系>>canvas的beginPath和closePath分析总结,包括多段弧的情况

    今天查了一下beginPath()和closePath()关于区域的划分问题,发现到一篇解释得很明白的文章,我就直接转载到这里了. 原文请看:canvas的beginPath和closePath分析总 ...

  7. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  8. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  9. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

随机推荐

  1. DHTMLX-Vault

    DHTMLX-Vault Vault是DHTMLX中带有进度条效果的文件上传组件.该控件基于ajax文件上传功能,加入进度条图形显示每个文件的传输进程,并且可以显示预估上传时间. 基于HTML5标准, ...

  2. 修改eclipse中包的显示结构为树形

  3. [JavaScript]JS由来

    JavaScript最早由Netscape公司开发 JavaScript的发展历程 我们知道Windows桌面程序是可以交互的,用户可以点击菜单.按钮.下拉列表等控件,并通过消息机制来响应用户操作. ...

  4. codeforces E. Famil Door and Roads 期望

    一棵树,n个节点,边长为1,有q个询问,每个询问给出u,v(u != v),问在树上等概率加一条边,如果使得u,v在一个环内,则这种加边方式是合法的,此时的值为环的长度,所有合法的加边方式出现的概率相 ...

  5. 说说Web.Config与App.Config

    说到web.config和app.config大家都很熟悉,我们都叫他们配置文件,平时用的多,注意的少.两个有啥区别呢,很简单,一句话:如果是web程序,如webform项目类型和mvc项目类型就是w ...

  6. 设置树莓派3 B+的静态IP

    修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...

  7. JVM实用参数(四)内存调优

    理想的情况下,一个Java程序使用JVM的默认设置也可以运行得很好,所以一般来说,没有必要设置任何JVM参数.然而,由于一些性能问题(很不幸的是,这些问题经常出现),一些相关的JVM参数知识会是我们工 ...

  8. Android开发资料学习(转载/链接)

    http://www.devdiv.com/android_-forum-102-1.html 各种开源控件集合 http://www.cnblogs.com/android-blogs/p/5342 ...

  9. 扁平设备树(FDT)

    组成 扁平设备树主要由4大部分组成:头部(header),预留内存块(memory reservation block),结构块(struct block)和字符串块(strings block).这 ...

  10. POSTMAN发起请求收到乱码 http 406错误

    web前段异常: The resource identified by this request is only capable of generating responses with charac ...