0

Google chrome アプリのキャンバス API のメソッド .arc を使用して、HTML キャンバスに円 (r = 100px および lineWidth 500 px ) を描画しています。

しかし、lineWidth が大きいため、円の不正確さが拡大され、円のようには見えなくなります。

ここにデモがありますhttp://jsbin.com/ufofor/1/edit http://jsbin.com/ufofor/30/edit

var c = document.getElementById("canvas");
var g = c.getContext("2d");    
var r = 100;   

g.lineWidth = 500;    
g.arc(505, 505, r,0,2*Math.PI, true);
g.stroke();

.arc メソッドまたはその他を使用して、 canvas に大きな lineWidth を使用して完全な円を作成する方法/ハックはありますか?

編集

デモは firefox では正常に動作しますが、chrome では生成された円に不規則性が見られます。

デモの Chrome スクリーンショット

デモの Firefox スクリーンショット

これを指摘してくれてありがとう@Felix。

4

3 に答える 3

0

.arcコードを以下に変更すると、完全な円が作成されます-メソッドへの入力は歪んでいるように見えました：S

g.arc(505, 505, r2, 0, Math.PI / 360, true);
于 2013-02-24T12:41:46.133 に答える
0

の署名arcは

arc(x, y, radius, startAngle, endAngle, anticlockwise)

ここで、 と は両方startAngleともendAngleラジアンです。0したがって、完全な円の場合は、からからに描きたいと思いますMath.PI * 2-どこからそれらを取得したかわかりません30.

また、そのばかげた線幅でパスを作成するfill()代わりに、パスを試してみることをお勧めします。これは、奇数と値stroke()と組み合わせて、おそらく結果の形が崩れる原因です。lineCaplineJoin

于 2013-02-24T12:50:08.697 に答える