2

楕円を描画するこの方法は、クリーンでエレガントに見えます: http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/

ただし、テストしたところ、結果の楕円が引き伸ばされていることがわかりました。幅と高さを等しく設定すると、幅よりも高さが約 20% 高い楕円が得られました。の結果は次のwidth = height = 50とおりです。

背の高いキャンバスの楕円 (円である必要があります)

問題がメソッド自体にあることを確認するために、ベジエ曲線に使用されるすべてのポイントが 90 度回転するようにアルゴリズムを変更してみました。結果：

幅の広いキャンバスの楕円 (円である必要があります)

繰り返しますが、どちらの場合も、50x50 の円を期待していました。How to draw an oval in html5 canvas? でarc説明されている方法を使用しますか? 正常に動作し、完全な 50x50 の円が生成されます (その後、 を使用して楕円に引き伸ばすことができます)。scale

どうしたの？

4

1 に答える 1

4

質問を書いているときに、ベジエ曲線の制御点が機能する方法を誤解していることに気付きました。私が使用していたリソースを詳しく見てみると、楕円の弧は図の境界x - width / 2と境界に決して触れていませんx + width / 2。したがって、実際には「幅」ではありません。

arc将来的には、の代わりに固執しますbezierCurveTo。

（「カッパ」を使用してこれを調整することは可能です。この回答を参照してください。線の太さが不均一になるため、strokeだけでなくを使用している場合、そのアプローチはアークよりも望ましいです。）fillscale

于 2011-04-17T16:45:31.093 に答える