restore() 未清除剪辑区域

Question

我正在尝试绘制剪裁到区域 1 的 shape1 和剪裁到区域 2 的 shape2。我的自然假设是以下会得到我想要的效果。

context.save();
context.clip(region1);
context.fill(shape1);
context.restore();

context.save();
context.clip(region2);
context.fill(shape2);
context.restore();

然而，令我惊讶的是，第一个 restore() 并没有取消当前的剪辑区域。相反，第二个区域与第一个区域相结合。这与多个在线资源相反，这些资源声称 restore() 是完成剪辑后的方法。

Live example。您可以看到第二个填充（蓝色）被裁剪到 region1+region2，而不仅仅是 region2。

更奇怪的是，这种附加行为是通过使用 save/restore 调用启用的。如果我放弃它们，第二个 clip 调用将被忽略。

所以，我有两个问题。

剪辑在 html5 canvas 中的工作方式是否有任何逻辑？
我怎样才能完成我最初设定的目标？

感谢任何帮助解决这个问题的人！

Answer 1

始终以 context.beginPath() 开始绘制新路径。

如果不这样做，将导致所有以前的绘图命令与新添加的命令一起重新执行。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.save();
ctx.beginPath();
ctx.rect(100, 0, 100, 300);
ctx.clip();
ctx.fillStyle = "lime";
ctx.fillRect(0,0,300,300);
ctx.restore();


ctx.save();
ctx.beginPath();
ctx.rect(50, 50, 200, 200);
ctx.clip();
ctx.fillStyle = "blue";
ctx.fillRect(0,0,300,300);
ctx.restore();

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

restore() 未清除剪辑区域

Clipping region is not cleared by restore()

html

javascript

html5-canvas