HTML5画布夹JavaScript问题与Chrome [英] HTML5 canvas clip javascript issue with Chrome

问题描述

我在这样的画布上玩多个剪辑形状：

但是（只有在Chrome中），如果你将canvas元素的宽度或高度增加1px， 。

任何想法？请查看jsfiddle：

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

代码非常简单：

  for（i = 1; i <= 5; i ++）{
 ctx.save（）; 
 
 //剪贴蒙版
 ctx.beginPath（）; 
 ctx.arc（50 * i，50，20，0，Math.PI * 2，true）; 
 ctx.closePath（）; 
 
 ctx.clip（）; 
 
 //剪切的形状
 ctx.beginPath（）; 
 ctx.fillStyle =red; 
 ctx.arc（50 * i，70，20，0，Math.PI * 2，true）; 
 ctx.closePath（）; 
 ctx.fill（）; 
 
 ctx.restore（）; 
} 
  

- UPDATE -

事实证明，问题是与2D画布加速。如果我禁用
'加速2D画布'在chrome：//标志修复它。

这绝对不是解决方案！

必须是图形问题吗？ （是的，我有最新的驱动程序，chrome等）

解决方案

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

I am playing around with multiple clipped shapes on a canvas like this:

But (only in Chrome), if you increase the width or height of that canvas element by even 1px, it doesn't render all the shapes.

Any ideas? Have a look at the jsfiddle:

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

The code is pretty straight forward:

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();
}

-- UPDATE --

It turns out that the problem is to do with 2D canvas acceleration. If I disable 'Accelerated 2D canvas' in chrome://flags that fixes it.

This is definitely NOT a solution though!

Must be a graphics issue..? (yes I have up-to-date drivers, chrome, etc.)

解决方案

I have the same issue on Win10, chrome 50.0.2661.75 m. The issue started when I updated from 49, and is not reproducible in all computers with the same OS and Chrome version configurations, so probably it has to do with graphics hardware, I got an AMD Radeon HD6570. But on latest canary chrome 52.0.2713.0, the issue is not reproducible, so I can deduce that is a hardware handling issue brought on chrome 50 version. (I can't comment the question, so I wrote here some extra info that can be useful)

这篇关于HTML5画布夹JavaScript问题与Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！