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

Posted 2023-02-25

【中文标题】HTML5 Canvas 剪辑与前一个剪辑重叠

【英文标题】：HTML5 Canvas clip overlaps previous clip

【发布时间】：2014-04-22 20:14:13

【问题描述】：

我有一个奇怪的问题，在 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();

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

有没有办法阻止剪辑调用流血/重叠以前的剪辑？

【参考方案1】：

您在第二个剪辑中缺少beginPath()：

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

Modified fiddle

发生的情况是您的新矩形与第一个矩形合并，因为描边/填充不会清除路径 - 所以两者都被再次描边/填充。要清除路径，您必须使用beginPath() 明确清除它。因为路径也是clip()..的基础。