HTML Canvasチートシート

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「HTML Canvasチートシート」についてお伝えしていきます。

HTML Canvasは、JavaScriptを使用してグラフィカルなコンテンツを描画するための強力なツールです。

Canvas要素の作成

htmlCopy code
<canvas id="myCanvas" width="400" height="200"></canvas>
<canvas id="myCanvas" width="400" height="200"></canvas>

Canvasコンテキストの取得

javascriptCopy code
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

矩形の描画

javascriptCopy code
ctx.fillStyle = "red"; // 塗りつぶしの色
ctx.fillRect(50, 50, 100, 80); // (x, y, 幅, 高さ)
ctx.fillStyle = "red"; // 塗りつぶしの色
ctx.fillRect(50, 50, 100, 80); // (x, y, 幅, 高さ)

パスの描画

javascriptCopy code
ctx.strokeStyle = "blue"; // 線の色
ctx.lineWidth = 2; // 線の幅
ctx.beginPath();
ctx.moveTo(150, 50); // 開始点 (x, y)
ctx.lineTo(250, 50); // 線を引く点 (x, y)
ctx.lineTo(250, 130);
ctx.closePath(); // パスを閉じる
ctx.stroke(); // 線を描画
ctx.strokeStyle = "blue"; // 線の色
ctx.lineWidth = 2; // 線の幅
ctx.beginPath();
ctx.moveTo(150, 50); // 開始点 (x, y)
ctx.lineTo(250, 50); // 線を引く点 (x, y)
ctx.lineTo(250, 130);
ctx.closePath(); // パスを閉じる
ctx.stroke(); // 線を描画

円の描画

javascriptCopy code
ctx.fillStyle = "green"; // 塗りつぶしの色
ctx.beginPath();
ctx.arc(350, 100, 30, 0, Math.PI * 2); // (x, y, 半径, 開始角度, 終了角度)
ctx.fill(); // 円を塗りつぶす
ctx.fillStyle = "green"; // 塗りつぶしの色
ctx.beginPath();
ctx.arc(350, 100, 30, 0, Math.PI * 2); // (x, y, 半径, 開始角度, 終了角度)
ctx.fill(); // 円を塗りつぶす

テキストの描画

javascriptCopy code
ctx.font = "24px Arial"; // フォント設定
ctx.fillStyle = "black"; // テキストの色
ctx.fillText("Hello, Canvas!", 50, 180); // (テキスト, x, y)
ctx.font = "24px Arial"; // フォント設定
ctx.fillStyle = "black"; // テキストの色
ctx.fillText("Hello, Canvas!", 50, 180); // (テキスト, x, y)

画像の描画

javascriptCopy code
const img = new Image();
img.src = "image.png"; // 画像のパス
img.onload = () => {
  ctx.drawImage(img, 50, 50, 100, 80); // (画像, x, y, 幅, 高さ)
};
const img = new Image();
img.src = "image.png"; // 画像のパス
img.onload = () => {
  ctx.drawImage(img, 50, 50, 100, 80); // (画像, x, y, 幅, 高さ)
};

クリア

javascriptCopy code
ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア

実践的な例

javascriptCopy code
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// グラデーションの作成
const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

// 矩形描画
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 300, 100);

// テキスト描画
ctx.font = "24px Arial";
ctx.fillStyle = "white";
ctx.fillText("Canvasチートシート", 80, 130);

// 円描画
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(350, 50, 30, 0, Math.PI * 2);
ctx.fill();
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// グラデーションの作成
const gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

// 矩形描画
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 300, 100);

// テキスト描画
ctx.font = "24px Arial";
ctx.fillStyle = "white";
ctx.fillText("Canvasチートシート", 80, 130);

// 円描画
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(350, 50, 30, 0, Math.PI * 2);
ctx.fill();