Internet Explorer 10 画布剪辑意外行为

Posted 2023-03-23

【中文标题】Internet Explorer 10 画布剪辑意外行为

【英文标题】：Internet Explorer 10 canvas clipping unexpected behavior

【发布时间】：2012-11-16 17:05:42

【问题描述】：

在一个 html5 画布应用程序中，我使用剪辑来重绘画布的损坏部分，如下所示：

ctx.beginPath();
ctx.rect(30, 30, 100, 100);
ctx.rect(100, 100, 100, 100);
ctx.clip();
ctx.clearRect(0, 0, 600, 400);

我还创建了一个fiddle 来说明问题。在除 IE10 之外的所有支持浏览器上，它都会显示两个重叠的黑色矩形。

现在的问题是这是否是 IE10 错误，或者因为它更接近标准，它实际上是预期的行为，只是运气好，它可以在所有其他浏览器中运行。如果是这样，这样做的正确方法是什么？

【参考方案1】：

这个明显的 IE10 错误的一种可能的规避方法是逐个清除矩形。一个优点：速度更快，因为它不需要设置剪辑

【讨论】：

这是真的。谢谢你。一旦你有一个不规则的夹子，比如三角形，它仍然不起作用，所以这个问题仍然是一个烦人的错误！

【参考方案2】：

你需要调用 ctx.fill();最后

【讨论】：

不，我想清除这部分以重新绘制它，例如，一些与损坏区域重叠但不应在剪切区域之外绘制的图像的 drawImage 调用。由于 IE10 不像其他浏览器那样裁剪该区域，因此无法清除（也不能重新绘制）。

【参考方案3】：

这是 IE10 中的一个错误。我在这里发布了一个类似的问题：

https://connect.microsoft.com/IE/feedback/details/782736/canvas-clearrect-fails-with-non-rectangular-yet-simple-clipping-paths

MS 说：“是的，它是一个错误。等待几年我们来修复它。”对 MS 来说太糟糕了，现在所有其他浏览器都可以正常工作。