Javascript firefox和chrome上的画布圆弧渲染差异

我试着画一个矩形，它由沿着矩形四边的小圆圈组成。这是我的密码：

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

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”；
//上下
对于（变量i=x，len=x+w；i

尽管这段代码在Chrome上的效果与我所希望的一样，但Firefox 16.0.1上的渲染是错误的（或不同的）。我注意到，当我在每个arc方法之前和之后添加beginPath和stroke时，代码的工作方式与我在Firefox上的预期一致

PS：问题似乎发生在填充上，而不是笔划上。所以我在示例代码中更改了它。以下是该示例的链接：

我错过了什么？感谢您的帮助。

---

谢谢

这段代码在Firefox和Chrome上看起来都一样

---

“#000000 cc”

不是有效的填充样式，它不是有效的十六进制RGB值。如果您需要alpha，您需要使用“rgba（0,0,015）”等。

对不起。这种差异似乎发生在填充上，而不是笔划上。下面是一个例子的链接：这很有趣！Firefox在这里遵循的规范是正确的，我不知道为什么Chrome没有，因为它在我的ARC测试中总是做正确的事情。我想你想要做到的是：为了记录在案，Firefox、Opera和IE10都正确地显示了你的代码。稍后我会用Chrome在这个问题上提交一个bug是的，按照规范的顺序，当你在一个路径中写第一个“弧”时，会有一个隐式的移动。对于该段之后的每一个“弧”，它会自动从最后一段的末端到新弧的起点形成一条直线，并且您希望避免这种情况，因此您必须输入

moveTo

s。希望你的项目进展顺利！