コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 キャンバスで楕円を描画し、線の太さを均一に保つためのヒント_html5 チュートリアルのヒント

HTML5 キャンバスで楕円を描画し、線の太さを均一に保つためのヒント_html5 チュートリアルのヒント

WBOY
リリース： 2016-05-16 15:49:54
オリジナル
1427 人が閲覧しました

Canvas での楕円の描画は非常に一般的な要件です。比較的新しい HTML Canvas 2D Context W3C ドラフトでは、楕円を描画するための ellipse メソッドが追加されています。そのため、arc または arcTo を使用する必要があります。 . スケール変形を組み合わせて楕円を描く方法です。

サンプルコード:

コードをコピー
コードは次のとおりです:


<script> <br>var ctx = documentquerySelector('canvas')getContext('2d'); = "10 "; <br>ctxarc(150,150,100,0,MathPI*2,false); <br></script>



線の太さが不均一で、ストロークもスケールの影響を受けているため、何かが間違っています。 この問題を解決するには、ちょっとしたコツが必要です。
サンプルコード:



コードをコピー
コードは次のとおりです:
[コード]
著者別の最新記事
最新の問題
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
キャンバスの *2* 高さの値を取得しますか? このキャンバスの 2 つの高さの値を取得しようとしています。 <canvaswidth="886"height="792"style=...
から 2024-04-05 09:32:33
0
1
1360
複数のキャンバスからjpgをエクスポートする方法 レイヤーとして使用される複数のキャンバスがあります。 Canvasc1=backgroundimage.canvasc2=charactorimage.canvasc3=itemi...
から 2024-04-03 21:02:43
0
1
319
Vite React プロジェクトを保存するたびに、既存のキャンバス要素を置き換えるのではなく、新しいキャンバス要素がページ本文に追加されるのはなぜですか? ThreeJs の学習を始めようとしています (JavaScript Web 開発も初めてです)。いくつかのチュートリアルを見た後、Vite と React から始め、次に基本的な...
から 2024-03-30 09:57:49
0
1
396
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート