画布裁剪区域和画布堆栈

Question

我已经开始阅读O‘’Reilly的书"HTML5画布“。我在第二章，其中一个例子给出的代码不是很好的解释。例2-5：

1. 画黑匣子
2. 推态
3. 在左上角设置小裁剪区域
4. 画圆
5. pop状态
6. 设置大裁剪区域
7. 画另一个圆

但我很难理解一些事情

context.fillStyle = 'black';
context.fillRect(10, 10, 200, 200);

context.save();

context.beginPath();
context.rect(0, 0, 50, 50);
context.clip();

context.beginPath();
context.strokeStyle = 'red';
context.lineWidth = 5;
context.arc(100, 100, 100, 0, 2*Math.PI, false);
context.stroke();
context.closePath();

context.restore();

context.beginPath();
context.rect(0, 0, 500, 500);
context.clip();

context.beginPath();
context.strokeStyle = 'blue';
context.lineWidth = 5;
context.arc(100, 100, 50, 0, 2*Math.PI, false);
context.stroke();
context.closePath();

我的问题：

首先，context.clip()是否隐式关闭上下文路径("context.closePath()")？它前面是一个context.beginPath()，后面是另一个context.beginPath()。如下所示：

context.beginPath();
context.rect(0, 0, 50, 50);
context.clip();
context.beginPath();

第二，为什么有必要推动上下文状态？为什么我不能改变剪裁区域呢？这似乎是必要的，因为它在不推动政府的情况下是行不通的。如果我不推动这个国家，然后恢复它，蓝色的大圆圈就不会出现，我也不明白为什么。

Answer 1

context.clip()是否隐式关闭上下文路径？ 它前面是一个context.beginPath()，后面是另一个context.beginPath()。像这样：..。

是的，这是创建裁剪所需的封闭形状的唯一方法，因此如果closePath()未被调用，则将在内部关闭路径。

The 规范规定：

在计算裁剪区域时，必须隐式关闭开子路径，而不影响实际子路径。

beginPath()将清除当前主路径及其所有子路径.裁剪仍然处于活动状态，但是现在您可以执行其他路径操作，这些操作在光栅化时会受到剪辑区域的影响。

为什么有必要推动上下文状态？

没有办法重置一个剪辑区域，尽管它已经被建议和讨论(在标准中有一个resetClip()，但还没有得到广泛的支持)。几次clip() -

方法必须通过计算当前裁剪区域的交集来创建一个新的裁剪区域。

换句话说，如果我们说为整个绘图曲面定义了一个剪辑区域，它就不会被替换。

因此，我们可以删除剪辑的唯一方法是保存状态，然后设置剪辑，然后还原以删除它。