Canvasタグの内容は何ですか?

タグは、Web ページ上でグラフィックス、アニメーション、その他のピクセルベースの画像操作を描画するために使用されます。一般的に使用される関連属性とメソッドは次のとおりです: 1. 「幅と高さの属性」、指定に使用されます。キャンバスの幅と高さ; 2. 「getContext('2d') メソッド」、2D 描画環境を取得; 3. 「描画メソッド」、描画コンテキスト; 4. 「塗りつぶしとストロークのスタイル」; 5. 「Path パス」複雑なグラフィックスを定義するための「」、6.「グラデーション」、7.「絵の描画」。

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

タグは HTML5 で導入された新しいタグで、Web ページ上でグラフィックス、アニメーション、その他のピクセルベースの画像操作を描画するために使用されます。 タグの一般的に使用される関連属性とメソッドをいくつか示します:

• width 属性と height 属性: 属性を設定することによって、キャンバスの幅と高さを指定するために使用されます。値を変更するか、JavaScript を使用して動的に変更します。

• getContext('2d') メソッド: このメソッドを呼び出すことで 2D 描画環境 (コンテキスト) を取得し、その環境が提供する描画メソッドを使用して描画することができます。 。一般的に使用される描画コンテキストは「2d」です。

• 描画メソッド: 描画コンテキストは、fillRect() (塗りつぶされた四角形の描画)、ストロークRect() (境界線の四角形の描画)、arc など、グラフィックスを描画するための一連のメソッドを提供します。 () (円弧を描く) など

• 塗りつぶしスタイルとストローク スタイル: fillStyle プロパティとストロークスタイル プロパティを使用して、グラフィックスの塗りつぶしスタイルとストローク スタイル (カラー値、グラデーション オブジェクト、パターン オブジェクトなど) を設定できます。

• パス: パスを使用して、直線、曲線、円弧などの複雑なグラフィックスを定義します。パスの作成と操作には、beginPath() を使用して新しいパスを開始する、moveTo() を使用して指定した点に移動する、lineTo() を使用して 2 点を結ぶ線を引く、arcTo() を使用して円弧を作成するなどが含まれます。

• Gradient: 描画コンテキストには、createLinearGradient() や createRadialGradient() など、線形グラデーションと放射状グラデーションを作成するためのメソッドが用意されており、これらを使用して塗りつぶしやストロークのグラデーションを設定できます。

• 絵の描画:drawImage() メソッドを使用して、キャンバスに絵を描画します。