はじめに
HTML の<canvas>タグは、Web ページ上にグラフィックやその他の視覚要素を描画するために使用されます。このタグは、開発者が JavaScript を使ってゲーム、画像、アニメーションを作成するためのプラットフォームを提供します。キャンバス要素には、キャンバスのサイズ、不透明度、外観を操作するためのさまざまな属性があります。
この実験では、HTML の<canvas>タグを使ってグラフィックを作成し、アニメーションを追加し、JavaScript を使って形状やテキストを操作する方法を探ります。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080タブを更新して Web ページをプレビューできます。
シンプルなキャンバスの作成
コンテンツを一切持たない<canvas>タグを使って、シンプルなキャンバスを作成しましょう。index.htmlファイルに次のコードを記述します。
<!doctype html>
<html>
<head>
<title>Simple Canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
ファイルを保存し、ブラウザで開きます。ページ上に空白の領域が表示されるのがわかります。これが、デフォルトの幅が 300px、高さが 150px のキャンバスです。
キャンバスにスタイルを追加する
style属性を使って、キャンバスにスタイルを追加することができます。キャンバスの境界を視認できるように、キャンバスにボーダーを追加しましょう。
<!doctype html>
<html>
<head>
<title>Styled Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
</body>
</html>
ファイルを保存し、ブラウザを更新して結果を確認しましょう。
キャンバス上に図形を作成する
次に、キャンバスにいくつかのグラフィックを追加しましょう。これを行うには、JavaScript を使用する必要があります。getContext()メソッドを使って、キャンバスの 2 次元描画コンテキストを取得し、それに対して様々な操作を行うことができます。
<!doctype html>
<html>
<head>
<title>Shapes on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);
</script>
</body>
</html>
上記のコードでは、まず ID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って 2 次元描画コンテキストを取得します。そして、四角形を赤色で塗りつぶすためにfillStyleプロパティを「red」に設定します。最後に、fillRect()メソッドを使って四角形を描画します。
ファイルを保存し、ブラウザを更新して結果を確認しましょう。
キャンバスにテキストを追加する
JavaScript を使って、キャンバスにいくつかのテキストを追加しましょう。
<!doctype html>
<html>
<head>
<title>Text on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Add text
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello World", 50, 100);
</script>
</body>
</html>
上記のコードでは、まず ID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って 2 次元描画コンテキストを取得します。そして、fontプロパティを「30px Arial」に、fillStyleプロパティを「blue」に設定します。最後に、fillText()メソッドを使って「Hello World」のテキストを追加します。
ファイルを保存し、ブラウザを更新して結果を確認しましょう。
キャンバス上でグラフィックをアニメーション化する
JavaScript と HTML の<canvas>タグを使って、キャンバス上でアニメーションを作成することもできます。キャンバス上で移動する四角形のアニメーションを作成しましょう。
<!doctype html>
<html>
<head>
<title>Animated Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>
上記のコードでは、まず ID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って 2 次元描画コンテキストを取得します。そして、四角形の位置を保持するための変数xとyを宣言します。また、四角形をx軸に沿って移動させるための変数dxも宣言します。
次に、画面上に四角形を描画するための関数animate()を作成します。各フレームでキャンバス上の前の描画をクリアするためにclearRect()メソッドを使用します。そして、fillRect()メソッドを使って四角形を赤色で塗りつぶします。
その後、四角形がキャンバスの境界に達したかどうかを確認し、そうであればdxの値を変えることで移動方向を変えます。
最後に、アニメーション用のループを作成するためにrequestAnimationFrame()メソッドを呼び出します。
ファイルを保存し、ブラウザを更新してアニメーションされた四角形を確認しましょう。
まとめ
この実験では、HTML の<canvas>タグを使って Web ページ上でグラフィックとアニメーションを作成する方法を学びました。また、属性とスタイルを使ってキャンバスのサイズ、不透明度、外観を操作する方法も学びました。JavaScript とgetContext()メソッドを使って、キャンバス上に図形、テキスト、アニメーションを追加しました。
