摘要：学的时候，纠结的不是各种图形如何绘制，反而是和这两个函数什么时候用，它们到底做了什么。当你想创建一个新的路径时，调用此方法。是将笔点返回到当前子路径起始点的方法。这里的定义已经说得比较清楚了，就没什么必要赘述了。注以上的定义均来自
学canvas的时候，纠结的不是各种图形如何绘制 ，反而是beginPath()和closePath()这两个函数什么时候用，它们到底做了什么。
首先，这里说的是2D渲染的情况， 即CanvasRenderingContext2D对象（2D渲染上下文， 这个翻译感觉好拗口）。
要明确的一点是，用canvas画图的思路：通过绘制路径来绘制图形，路径是一系列点的集合 。PS里有个钢笔工具，跟这个就很像，我们会先用钢笔工具把路径画出来，然后可以选择填充或者描边。
搞不清楚概念的时候就仔细去看概念：
beginPath()CanvasRenderingContext2D.beginPath() 是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
在我们绘制路径的时候，实际上会有一个路径列表帮我们纪录当前所画的的子路径，而这整一个列表就是我们当前绘制的路径。那么子路径是什么鬼呢？意思就是比如你东画一条线，西画一条线，中间还画了一条线，这三条线就是子路径，它们不必首尾相连，可以相交也可以不相交。当你调用beginPath()方法的时候，就会把这整个列表清空，无论你有没有fill()或者stroke()，统统死啦死啦地。
closePath()CanvasRenderingContext2D.closePath() 是 Canvas 2D API 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。
注意，是子路径。这里的定义已经说得比较清楚了，就没什么必要赘述了。
绘制路径理解了它们的定义后，怎么用的话心里应该也有一个大致的概念了。还有必要说一下moveTo()的定义
CanvasRenderingContext2D.moveTo()是 Canvas 2D API 将一个新的子路径的起始点移动到(x，y)坐标的方法。
注意，是子路径。所以绘制一条路径（可以包括多条子路径）的规则就是：
beginPath()一下
先绘制一条子路径。有必要moveTo()的就moveTo，然后调用相应绘制函数，最后有必要closePath()的就closePath。绘制多条就如法炮制。
填充fill()或者描边stroke(), 或者两者一起用。
对规则2的解释：为什么说有必要moveTo和closePath才做相应的操作呢？closePath好理解，我就是想单纯的画一条路径出来而已，那就没必要闭合了。至于moveTo，这取决于你想要画的效果，就是字面的你想从哪个点开始画呢？比如用arc()画一个扇形，你就得先把起始点移到原点，不然就会画成一个像拱桥的弓形了，点击查看相关实例。
对规则3的解释：因为之前画的路径只是纪录了一系列点的位置，并没有真正画出来，所以最后要调用函数来渲染
最后，注意有些方法会自动闭合路径，比如fill()和clip()。这也很好理解，因为这两个方法都是作用于一块区域，不闭合的话计算机哪里知道你要对哪块区域进行操作呢？这时候就可以不用调用closePath()了。stroke()不会自动闭合路径。点击查看相关实例。
注：以上api的定义均来自MDN
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84280.html
摘要：但需要注意的是，需在使用前调用。当然，你愿意的话也可以两者结合着用。绘制图像相信很多入门的，都看不到这个地方，不就是绘制图像的嘛，啊不准确，是绘制图形的。明确的说，是指围绕原点图像旋转弧度。 前言 本文写在七月底，进来不加班就整理了一下，一些非常基础的知识，对于canvas刚入门的人来说，值得阅读一下。 来个气势如虹的开头 与看各种文章相比，我更喜欢数学里的逻辑；与学习各种日新月异的框...
摘要：由于工作需求需要写一个翻角效果链接右上角需要从无的状态撕开一个标记且有动画过程上图是实现的效果图不是对这个翻角效果的难点在于没有翻开的时候露出的是下面的内容实现角度来说纯动画的设计方案并没有相出一个好的对策于是捡起了好久之前学的入门级别的下 由于工作需求 , 需要写一个翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
摘要：由于工作需求需要写一个翻角效果链接右上角需要从无的状态撕开一个标记且有动画过程上图是实现的效果图不是对这个翻角效果的难点在于没有翻开的时候露出的是下面的内容实现角度来说纯动画的设计方案并没有相出一个好的对策于是捡起了好久之前学的入门级别的下 由于工作需求 , 需要写一个翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
阅读 2603·2021-09-26 10:19
阅读 2114·2021-09-24 10:27
阅读 2488·2021-09-01 10:42
阅读 2275·2019-08-29 16:09
阅读 2467·2019-08-29 15:17
阅读 1430·2019-08-29 15:09
阅读 607·2019-08-29 11:14
阅读 2280·2019-08-26 13:25
