Firefox 和 chrome 上的画布弧渲染差异

Question

我正在尝试沿着矩形的四个边绘制一个由小圆圈组成的矩形。这是我的代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var x = 0;
var y = 0;
var w = 200;
var h = 100;

ctx.beginPath();
ctx.fillStyle = "#000000";

// top and bottom
for(var i = x, len = x+w ; i < len ; i = i+4) {
ctx.arc(i, y, 0.5, 0, 2 * Math.PI, false);
ctx.arc(i, y+h, 0.5, 0, 2 * Math.PI, false);
}

// right and left
for(var i = y, len = y+h ; i < len ; i = i+4) {
ctx.arc(x, i, 0.5, 0, 2 * Math.PI, false);
ctx.arc(x+w, i, 0.5, 0, 2 * Math.PI, false);
}   

ctx.fill();

即使此代码在 Chrome 上可以正常工作，但 Firefox 16.0.1 上的渲染是错误的（或不同的）。我注意到，当我在每个 arc 方法之前和之后添加 beginPath 和 stroke 时，代码可以在 Firefox 上正常工作。

PS：问题似乎与填充有关，而不是笔划。所以我在示例代码中对其进行了更改。这是示例的链接：http://jsfiddle.net/GACsh/

我在这里缺少什么？任何帮助表示赞赏。 谢谢

Answer 1

此代码在此处的 Firefox 和 Chrome 上看起来相同。

http://jsfiddle.net/X7GYg/

"#000000CC" 不是有效的填充样式，它不是有效的十六进制 RGB 值。如果您需要 alpha，则需要使用 "rgba(0,0,0,150)" 等。