Chrome浏览器的HTML5画布剪辑javascript问题

时间:2016-04-06 23:46:13

标签: javascript html5 google-chrome canvas html5-canvas

我在画布上玩多个剪裁的形状,如下所示:

ovals

但是(仅限Chrome),如果你将画布元素的宽度或高度增加1px,它就不会呈现所有形状。

有什么想法吗?看看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://标记中的“加速2D画布”。

这绝对不是解决方案!

必须是图形问题..? (是的,我有最新的驱动程序,铬等)

1 个答案:

答案 0 :(得分:0)

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