キャンバスの基礎知識をマスターする: 知っておくべきことすべて

Canvas は、JavaScript を使用して描画する方法を提供する HTML5 の新しいタグです。 Canvas を使用すると、グラフィックの描画、アニメーションの作成、画像の処理、Web ページ上でのインタラクティブな効果の実現が可能になります。この記事では、Canvas 要素の作成方法、基本的な図形とパスの描画方法、テキストの描画方法、画像の使用方法など、Canvas の基本的な知識を紹介し、詳細なコード例を示します。

1. Canvas 要素の作成
   Web ページで Canvas を使用するには、まず Canvas 要素を作成する必要があります。以下に示すように、HTML コードを使用して Canvas 要素を作成できます。

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

   上記のコードでは、ID が「myCanvas」、幅と高さが 500 ピクセルの Canvas 要素を作成します。サイズと位置はCSSで設定できます。

2. 描画コンテキストの取得
   Canvas 要素を作成した後、描画操作を実行する前に描画コンテキストを取得する必要があります。 Canvas 要素は、次に示すように、描画コンテキストを取得する getContext() メソッドを提供します。

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

   上記のコードでは、まず getElementById() メソッドを使用して、ID が「myCanvas」の Canvas 要素を取得します。 getContext("2d") メソッドは 2D 描画コンテキストを取得します。 Canvas は webgl、webgl2 などの描画コンテキストもサポートしていますが、ここでは主に 2D 描画について紹介します。

3. 基本的な図形とパスを描画する
   Canvas には、長方形、円、線などの基本的な図形やパスを描画するためのメソッドがいくつか用意されています。以下に、一般的に使用されるメソッドとそのサンプル コードを示します。

• 四角形を描画します。

  ctx.fillStyle = "red"; // 设置填充颜色
  ctx.fillRect(50, 50, 100, 100); // 绘制矩形

  上記のコードでは、最初に fillStyle 属性を使用して、塗りつぶしの色を red に設定し、 fillRect() メソッドを使用して、左上隅の座標が (50, 50)、幅と高さが 100 ピクセルの四角形を描画します。

• 円の描画:

  ctx.beginPath(); // 开始绘制路径
  ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 绘制圆
  ctx.fillStyle = "blue";
  ctx.fill(); // 填充路径

  上記のコードでは、まず beginPath() メソッドを使用してパスの描画を開始し、次に arc() メソッドを使用します。中心座標が ( 100, 100)、半径が 50 ピクセル、開始角度と終了角度が 0 の円を描画します。次に、fillStyle 属性を使用して塗りつぶしの色を青に設定し、最後に fill() メソッドを使用してパスを塗りつぶします。

• 直線を描く:

  ctx.moveTo(100, 200); // 将画笔移动到坐标(100, 200)
  ctx.lineTo(200, 200); // 绘制直线到坐标(200, 200)
  ctx.strokeStyle = "green"; // 设置描边颜色
  ctx.stroke(); // 描边路径

  上記のコードでは、まず moveTo() メソッドを使用してブラシを座標 (100, 200) に移動します。次に lineTo() メソッドを使用して、座標 (200, 200) まで直線を描きます。次に、ストロークスタイル プロパティを使用してストロークの色を緑色に設定し、最後にストローク() メソッドを使用してパスをストロークします。

4. テキストの描画
   Canvas には、fillText()、ストロークText() など、テキストを描画するためのメソッドがいくつか用意されています。以下はテキストを描画するサンプル コードです:

ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello Canvas!", 100, 100); // 绘制填充文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.strokeText("Hello Canvas!", 100, 100); // 绘制描边文本

上記のコードでは、まず font 属性を使用してフォント スタイルを設定し、次に fillStyle 属性を使用して塗りつぶしの色を黒に設定します。そして、fillText() メソッドを呼び出して、塗りつぶされたテキストを描画します。次に、ストロークスタイル プロパティを使用してストロークの色を赤に設定し、ストロークテキスト() メソッドを呼び出してストローク テキストを描画します。

5. 画像の使用
   Canvas では画像を使用して描画でき、Image オブジェクトを使用して画像を読み込むことができます。以下は、画像を使用するサンプル コードです。

var img = new Image(); // 创建Image对象
img.src = "image.jpg"; // 设置图像路径
img.addEventListener("load", function() {
  ctx.drawImage(img, 0, 0); // 绘制图像
});

上記のコードでは、最初に Image オブジェクトを作成し、次に src 属性を使用して画像のパスを設定します。ロード イベントで、drawImage() メソッドを呼び出してイメージを描画します。パラメータは Image オブジェクトと左上隅の座標 (0, 0) です。

以上がCanvasの基礎知識とコード例です。これらの基礎知識を学ぶことで、Canvas を理解し、描画操作に使用できるようになります。この記事がお役に立てば幸いです!

以上がキャンバスの基礎知識をマスターする: 知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。