Internet Explorer 10 画布剪辑意外行为答案

【问题标题】：Internet Explorer 10 canvas clipping unexpected behaviorInternet Explorer 10 画布剪辑意外行为
【发布时间】：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 中的一个错误。我在这里发布了一个类似的问题：

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

【讨论】：