Chrome 27.0中canvas的arc函数失效了吗？

Question

我有一个奇怪的问题，涉及canvas和Chrome 27.0：
在canvas上大量绘图后，在OS X上使用arc函数会在Chrome中绘制实心正方形，但在相同的OS X机器上使用Safari、Firefox时却能正常工作，在Windows上使用IE10、Chrome和Firefox时也一直没问题。
如果不运行之前的大量代码，该问题无法重现，因此我认为它与之前的操作有关。以下是一些信息，希望有人能给我指点方向：
这是失败的代码：

    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
    ctx.arc(cx*sfx, cy*sfy, width*sfy, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.stroke();  

我可以通过将弧线不画满2pi，而是1.9999pi的方式，在Chrome中绘制圆形。以下是可行代码：

    ctx.beginPath();
    ctx.strokeStyle = "rgba(255, 255, 255, 0.9)";
    ctx.arc(cx*sfx, cy*sfy, width*sfy, 0, Math.PI * 1.999, false);
    ctx.closePath();
    ctx.stroke();

还有一种方法是删除beginPath()语句。然而，这样会在画布上从上一个对象绘制的位置到圆形起点之间绘制一条直线。

我已尝试重新排序、删除重复的begin/end路径语句，但除了上述描述外没有效果。

有任何线索吗？

干杯

• Balt

- Balthasar

---

这里也有同样的问题。（Windows 7 Chrome 27.0.1453.110） - Bodman

我现在已经将所有圆弧代码绘制圆改为使用Math.PI * 1.9999而不是Math.PI * 2。显然这不是一个好的解决方案，但它暂时解决了问题。 - Balthasar

啊，是的。这个问题已经消失了，但我在旧版本的画布上仍然能看到它。 - Bodman

Answer 1

我曾经遇到过同样的问题，一开始也使用了相同的hack方法，但后来我添加了一个moveTo。

  ctx.moveTo(x + radius, y);
  ctx.arc(x, y, radius, 0, Math.PI*2, true);

  /*
  Chrome suddenly started drawing a filled square (2013 May 26)
  can't get the filled square though in jsfiddle

  first try was changing it to
  ctx.arc(x, y, radius, 0, Math.PI*1.999, false)
  which worked, but then added the moveTo, which also made it work again
  */

- wubbewubbewubbe