Chrome 的 HTML5 画布剪辑 javascript 问题答案

【问题标题】：HTML5 canvas clip javascript issue with ChromeChrome 的 HTML5 画布剪辑 javascript 问题
【发布时间】：2016-04-20 22:50:25
【问题描述】：

我正在像这样在画布上玩多个剪裁的形状：

但是（仅在 Chrome 中），如果您将该画布元素的宽度或高度增加 1 像素，它不会呈现所有形状。

有什么想法吗？看看jsfiddle：

https://jsfiddle.net/entozoon/6fqq0567/

代码非常简单：

for (i=1;i<=5;i++) {
  ctx.save();

  // clipping mask
  ctx.beginPath();
  ctx.arc(50 * i, 50, 20, 0, Math.PI * 2, true);
  ctx.closePath();

  ctx.clip();

  // shape to be clipped
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(50 * i, 70, 20, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  ctx.restore();
}

-- 更新--

事实证明，问题与 2D 画布加速有关。如果我禁用修复它的 chrome://flags 中的“加速 2D 画布”。

但这绝对不是解决方案！

一定是图形问题..？（是的，我有最新的驱动程序、chrome 等）

【问题讨论】：

在 Win10、Chrome 49.0.2623.110 上调整大小对我有用。 Chrome 最近推出了几个 canvas-buggy 版本……也许会更新？
无法在 osX 10.9、Chrome 49.0.2623.110 上重现

标签： javascript html google-chrome canvas html5-canvas

【解决方案1】：

我在 Win10 上遇到同样的问题，chrome 50.0.2661.75 m。这个问题从我从 49 更新开始，并且在具有相同操作系统和 Chrome 版本配置的所有计算机上都无法重现，因此可能与图形硬件有关，我得到了 AMD Radeon HD6570。但是在最新的 canary chrome 52.0.2713.0 上，这个问题是不可重现的，所以我可以推断这是 chrome 50 版本带来的硬件处理问题。（我无法评论这个问题，所以我在这里写了一些有用的额外信息）

【讨论】：