2022-02-10

canvas路径与子路径

字数统计: 750字 | 阅读时长: 2分

在某一时，canvas只能存在一条路径，称为当前路径。

而当前路径，可以拥有多个子路径，而子路径由多个点组成, 当关闭当前路径时，也可以选择闭合或者不闭合路径

从下面的代码分析

const context = document.getElementById('canvas').getContext('2d')
context.beginPath()
context.rect(10,10, 100, 100)
context.stroke()

context.beginPath() 

context.rect(50, 50, 90, 50)
context.stroke()

1、先开启一条路径，为当前路径

2、 rect()参数构成的点坐标为子路径

3、context.stroke() 绘制

4、context.beginPath() 开启新的当前路径，前面的路径会被销毁

5、重复上面的 2和3

如果去掉第二个 context.beginPath() 会怎样？

如果去掉，那么就不会重新开启新的路径，使用原来的，当第二次 stroke() 的时候，就会导致第一个的 rect 再重新 stroke() 一次

下表和图表是理解Canvas API中路径创建的几个先决条件。

您可以将使用的某些方法分为两类：属于整个当前路径的方法和属于当前子路径的方法。路径可以由多个子路径组成。让我们看看它们是如何相互关联的：

Method	Purpose	MDN description
beginPath	创建新路径	“通过清空sub-paths列表来启动新路径。如果要创建新的path.，请调用此方法”
moveTo	创建新的子路径。	“在给定的（x，y）coordinates.指定的点开始一个新的sub-path”
lineTo	在当前子路径中创建新顶点。	“通过将sub-path’s最后一点连接到指定的（x，y）coordinates.向当前sub-path添加一条直线”
closePath	相当于当前子路径开始时的lineTo。	尝试添加一条从当前点到当前sub-path起点的直线。如果形状已闭合或只有一个点，此函数不执行nothing.
fill	用fillStyle填充路径内部。	“用当前fillStyle填充当前路径或给定路径。”

此图应总结所有这些操作：

canvas路径于子路径

整个）路径和子路径之间的区别很重要，但很容易忽略：beginPath创建一个全新的路径，moveTo创建一个子路径，但fill填充整个路径。此外，一次填充的内容将保持填充状态。这就像画画：当你画画布一次，并且被告知要填充重叠区域时，你必须在旧画上画画。

必须指出closePath不是beginPath的“对立面”。closePath不删除或添加新路径或子路径；它不会更改“当前”路径或子路径。由于beginPath和closePath有时是可选的，这就更加复杂了：例如，moveTo只应该创建一个子路径，但是如果在一开始调用它，当没有路径存在时，也会自动创建一条路径，使得moveTo之前的beginPath是多余的。

理解路径问题对于写canvas的程序来说非常重要，尤其在for循环的时候很容易出现问题，需要格外注意。

赏

纯属好玩