JavaScript - Canvas: ディジタル描画の初級者ガイド

こんにちは、志を抱くプログラマーさん！JavaScriptとCanvasのエキサイティングな世界に陪你案内する事を嬉しく思います。コンピュータサイエンスを10年以上教えてきた者として言えることは、Canvasは最も楽しくて報酬の高いトピックの一つです。まるでウェブブラウザの中にデジタルな遊び場があるようなものです！

Canvasとは？

コードに取り組む前に、まずCanvasとは何かを理解しましょう。白い紙とカラフルなペンセットを思い浮かべてください。それがデジタル世界におけるCanvasの本質です。ウェブページ上の空白なエリアで、JavaScriptを使って何でも描ける场所です！

CanvasはHTML5で導入され、以来、グラフィックス、アニメーション、そしてゲームを直接ウェブブラウザで作成する強力なツールとなりました。まるでコードエディタの中にミニアートスタジオがあるようなものです！

JavaScriptでCanvasを操作する

では、袖をまくって描画を始めましょう！まず、HTMLでCanvasを設定します。

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

これで、400ピクセル幅、200ピクセル高のcanvas要素が作成されます。これをデジタルな描画ボードと考えましょう。

Canvasを始める

Canvasに描画を始めるためには、JavaScriptコードでそれを参照し、描画コンテキストを取得する必要があります。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

getContext('2d')メソッドは、私たちがCanvasに描画するためのツールである2Dレンダリングコンテキストを提供します。

形状の描画

まずは簡単なものから始めましょう。四角形の描画！

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

このコードは、座標(50, 50)から始まり、幅100ピクセル、高さ75ピクセルの青い四角形を描画します。まるでデジタルなペンに「ここに青い四角形を描いて、これくらいの大きさにして」と言っているようなものです！

線の描画

次に、線を描いてみましょう：

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();

このコードは新しいパスを始め、ペンを(50, 50)に移動させ、(200, 100)に線を描き、最後にパスをストロークして見えるようにします。まるでコードで「点と点を結ぶ」遊びをしているようなものです！

円の描画

スマイリーを描いてみましょう。まずは顔の円を描きます：

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

これで、黒いアウトラインの黄色い円が描画されます。arcメソッドは少し怖い見た目ですが、ペンに「(200, 100)を中心に半径50の円を0から完全に一周する」と言っているようなものです。

テキストの追加

Canvasにテキストを追加してみましょう：

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

このコードはフォントを20ピクセルのArialに設定し、色を黒にし、「Hello, Canvas!」を位置(10, 30)から描画します。

例

基本をカバーしたので、楽しい例を見て、Canvasが本当にできることを見てみましょう！

例1: 家の描画

// Canvasを設定
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 家の本体を描画
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 屋根を描画
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// ドアを描画
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// ウィンドウを描画
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

このコードは、茶色の本体、赤い屋根、青いドア、黄色のウィンドウを持つシンプルな家を描画します。まるでコードブロックで家を建てているようなものです！

例2: アニメーションの円

動かしてみましょう！跳ねる円のシンプルなアニメーション：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

このコードは、Canvas内で跳ね回る緑の円を作成します。まるで自分で小さなポンゲームを作っているようなものです！

Canvasメソッドの表

ここに、私たちが使用したいくつかの一般的なCanvasメソッドと、いくつかの追加のメソッドの表を示します：

メソッド	説明
fillRect(x, y, width, height)	塗りつぶしの四角形を描画
strokeRect(x, y, width, height)	四角形のアウトラインを描画
clearRect(x, y, width, height)	指定された矩形エリアを消去
beginPath()	新しいパスを始める
moveTo(x, y)	パスを指定された点に移動
lineTo(x, y)	パスに線を描く
arc(x, y, radius, startAngle, endAngle)	円弧または円を描画
fill()	現在のパスを塗りつぶす
stroke()	現在のパスをストロークする
fillText(text, x, y)	Canvasに塗りつぶしのテキストを描画
strokeText(text, x, y)	Canvasにテキストのアウトラインを描画

コードを学ぶことは新しい言語を学ぶのと同じです。時間と練習が必要ですが、すぐに素晴らしいものを作成できるようになります！さまざまな形状やメソッドを組み合わせて試してみて、まずは楽しみましょう。誰かがCanvasを使って次の büyükウェブゲームを作るかもしれません！

Credits: Image by storyset