我在画布上玩多个剪裁的形状,如下所示:
但是(仅限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画布”。
这绝对不是解决方案!
必须是图形问题..? (是的,我有最新的驱动程序,铬等)
答案 0 :(得分:0)
我在Win10上有同样的问题,铬50.0.2661.75米。当我从49更新时,问题就开始了,并且在具有相同操作系统和Chrome版本配置的所有计算机中都无法重现,因此可能与图形硬件有关,我得到了AMD Radeon HD6570。但是在最新的canary chrome 52.0.2713.0上,这个问题是不可重现的,所以我可以推断出这是Chrome 50版本带来的硬件处理问题。 (我无法评论这个问题,所以我在这里写了一些可能有用的额外信息)