1

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

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/

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

4

1 回答 1

0

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

http://jsfiddle.net/X7GYg/

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

于 2012-10-22T04:07:08.113 回答