2

以下のスニペットを検討してください - jsFiddle で入手可能: http://jsfiddle.net/Xqu5U/2/

ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#FF0000';

for (var i = 0; i < 20; i++) {
    ctx.arc(i * 10, 50 + Math.sin(i * 0.5) * 15, 2, 0, Math.PI * 2);
}

ctx.fill();

クロムとFirefoxのキャンバス塗りつぶしの違い

Google Chrome では期待どおりに動作しますが、Firefox では最後の弧から最初の弧まで塗りつぶしがレンダリングされます。上記のスニペットを更新して、Firefox が Chrome とまったく同じように弧を描くようにするにはどうすればよいでしょうか?

4

4 に答える 4

1

これは古い質問ですが、将来の参考のために：

ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath()
ctx.fillStyle = '#FF0000'

for (var i = 0; i < 20; i++) {
    ctx.arc(i * 10, 50 + Math.sin(i * 0.5) * 15, 2, 0, Math.PI * 2)
    ctx.closePath()
}

ctx.fill()
于 2014-02-16T01:49:56.620 に答える
1

私はそれを機能させる方法を見つけました: http://jsfiddle.net/Xqu5U/3/。基本的にループctx.closePath()内に追加するだけです。forこれが最善の解決策かどうかはわかりませんが...

于 2012-12-29T19:01:57.990 に答える
-2

あなたはそれについて本当に何かすることはありません...

それは両方のブラウザの動作方法です...

あなたはそれを同じにするために正しいコマンドでCSSでいつでもそれを設計することができます...

http://w3schools.comにアクセスして、それを行うために必要なものを見つけてください:)

幸運を ！

于 2012-12-27T20:03:39.840 に答える