Canvas 属性の詳細な紹介と使用ガイド

Canvas 属性の概要と適用ガイド

1. はじめに
Canvas は、HTML5 が提供するグラフィック描画用の要素で、ブラウザ上で動的に表示できます。グラフィックを描画し、アニメーションを作成し、他の HTML 要素と対話します。 Canvas 要素には多くの属性があります。この記事では、一般的に使用される Canvas 属性を要約し、対応するアプリケーション ガイドラインとコード例を示します。

2. Canvas 属性の概要とアプリケーション ガイド

1. width と height
   これら 2 つの属性は、Canvas 要素の幅と高さをそれぞれピクセル単位で指定します。これら 2 つのプロパティを設定することにより、描画領域のサイズを制御できます。

サンプル コード:

<canvas id="myCanvas" width="500" height="300"></canvas>

2. getContext()
   getContext() メソッドは、描画操作を実行できる描画コンテキストのオブジェクトを返します。

サンプル コード:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3. fillStyle プロパティとストロークスタイル
   fillStyle プロパティは塗りつぶしの色の設定に使用され、ストロークスタイル プロパティは境界線の色の設定に使用されます。

サンプル コード:

ctx.fillStyle = "red";
ctx.strokeStyle = "blue";

4. lineWidth
   lineWidth プロパティは、線の幅をピクセル単位で設定するために使用されます。

サンプル コード:

ctx.lineWidth = 2;

5. lineCap
   lineCap プロパティは、行末のスタイルを設定するために使用されます。値は 3 つあります: butt (デフォルト)値、ストレートエンド）、ラウンド（ラウンドエンド）、およびスクエア（スクエアエンド）。

サンプル コード:

ctx.lineCap = "round";

6. lineJoin
   lineJoin プロパティは、2 本の線が交差するときの角のスタイルを設定するために使用されます。値は 3 つあります。round (角を丸くする) )、ベベル (面取りされたコーナー)、およびマイター (鋭いコーナー)。

サンプル コード:

ctx.lineJoin = "bevel";

7. globalAlpha
   globalAlpha プロパティは、0 から 1 の範囲の値で描画の透明度を設定するために使用されます。

サンプル コード:

ctx.globalAlpha = 0.5;

8. globalCompositeOperation
   globalCompositeOperation プロパティは、新しく描画されたグラフィックスが既存のグラフィックスとどのように重なるかを制御できる描画ブレンド モードを設定するために使用されます。

サンプル コード:

ctx.globalCompositeOperation = "source-over";

9. font
   font プロパティは、テキストを描画するときにフォント スタイルを設定するために使用されます。

サンプル コード:

ctx.font = "20px Arial";

10. textAlign プロパティと textBaseline
    textAlign プロパティは、テキストの配置を設定するために使用されます。値は 3 つあります: start (デフォルト値、text)左揃え）、末尾（テキストを右揃え）、中央（テキストを中央揃え）。
    textBaseline 属性は、テキスト ベースラインの位置を設定するために使用されます。値は、top、hanging (吊り下げベースライン)、middle、alphabetic (デフォルトのベースライン)、ideographic (表意文字ベースライン)、bottom の 6 つです。

サンプル コード:

ctx.textAlign = "center";
ctx.textBaseline = "middle";

11. shadowBlur とshadowColor
    shadowBlur プロパティは影のぼかしをピクセル単位で設定するために使用され、shadowColor プロパティは次の目的で使用されます。影の色を設定します。

サンプル コード:

ctx.shadowBlur = 10;
ctx.shadowColor = "black";

12. createLinearGradient() および createRadialGradient()
    createLinearGradient() メソッドは、線形グラデーション効果を持つグラデーション オブジェクトを作成するために使用されます。 () メソッド 放射状のグラデーション効果を作成するために使用されるグラデーション オブジェクト。

サンプル コード:

var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

13. createPattern()
    createPattern() メソッドは、画像、ビデオ、テキストなどのタイル パターンの無限ループを作成するために使用されます。 。

サンプル コード:

var img = new Image();
img.src = "pattern.png";
img.onload = function () {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
};

14. save() メソッドとrestore()
    save() メソッドは、すべての属性を含むキャンバスの現在の状態を保存するために使用されます。および変換。restore() メソッドは、キャンバスの以前の状態を復元するために使用されます。

サンプルコード:

ctx.save();
// 进行一系列绘图操作
ctx.restore();

上記は一般的に使用される Canvas プロパティとその適用ガイドラインであり、これらのプロパティを合理的に使用することで、さまざまなカラフルなグラフィックやアニメーション効果を実現できます。実際の開発では、特定のニーズに応じて柔軟に使用して、最良の結果を達成できます。想像力を働かせて、自分だけの素晴らしい写真を作りましょう!

以上がCanvas 属性の詳細な紹介と使用ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。