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"は有効な fillStyle ではありません。有効な 16 進 RGB 値ではありません。アルファが必要な場合は、"rgba(0,0,0,150)"などを使用する必要があります。

于 2012-10-22T04:07:08.113 に答える