Question

我有这个奇怪的问题，在HTML5中设置多个剪辑矩形会导致绘图出血/重叠到前面的剪辑框中，即使每个剪辑框都包含在ctx.save（） - ctx.restore（）中。

以下是代码示例：

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");

// 1st clip
ctx.save();
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.clip();
// draw red rectangle after 1st clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,300,140);
ctx.restore();

// 2nd clip
ctx.save();
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
// draw blue rectangle after 2nd clip
ctx.fillStyle="blue";
ctx.fillRect(0,0,300,140);
ctx.restore();

还有一个小提琴： http://jsfiddle.net/4eXw9/1/

有没有办法停止剪辑调用，使之前的剪辑出血/重叠？

Answer 1

您在第二个片段中缺少beginPath()：

// 2nd clip
ctx.save();
ctx.beginPath()
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();

<强> Modified fiddle

由于抚摸/填充不会清除路径，所以会发生新的矩形与第一个合并，因此两者都会被抚摸/填充。要清除路径，您必须使用beginPath()明确清除它。由于路径也是clip() ..

的基础

HTML5 Canvas剪辑与上一个剪辑重叠

1 个答案: