コメント:キャンバスでエリップを描画することは非常に一般的な要件ですが、ほとんどのブラウザはまだこの方法を実装していないため、アークまたはアーク法を使用してスケール変形を組み合わせてエリップを描画します。興味のある友達はそれについて学ぶことができ、それがあなたを助けることを望んでいます。
キャンバスで楕円を描くことは非常に一般的な要件です。新しいHTML Canvas 2D ContextW3Cドラフトでは、Ellipsを描画するための楕円メソッドが追加されていますが、ほとんどのブラウザはまだこの方法を実装していないため、Scale Dermationと組み合わせてEllipsを描画するARCまたはARCTOメソッドを使用する必要があります。
サンプルコード:
<canvas> </canvas>
<スクリプト>
var ctx = documentqueryselector( 'canvas')getContext( '2d');
ctxlinewidth = "10";
ctxscale(1,2);
CTXARC(150,150,100,0、mathpi*2、false);
ctxstroke();
</script>
線の厚さが不均一であり、脳卒中もスケールの影響を受けるため、少し間違っています。
この問題を修正するには、ちょっとしたトリックが必要です。
サンプルコード:
[コード]
<canvas> </canvas>
<スクリプト>
var ctx = documentqueryselector( 'canvas')getContext( '2d');
ctxlinewidth = "10";
ctxsave();
ctxscale(1,2);
CTXARC(150,150,100,0、mathpi*2、false);
ctxrestore();
ctxstroke();
</script>
[/コード]
さえ、完璧です。
トリックは、最初にキャンバス状態を保存し、次にスケーリングしてパスコマンドを呼び出してから、キャンバス状態を復元してから引き出します。
重要なポイントは、最初に保存してからズームし、最初に復元し、次にストロークすることです。