HTML - Canvas: HTMLキャンバスの初級者ガイド

こんにちは、未来のウェブ魔术師さんたち！今日は、HTML Canvasの世界に楽しく飛び込みます。心配しないでください。コードを書いたことがない方でも、私はあなたの親切なガイドとして、このトピックをステップバイステップで探索します。では、仮想の絵の具を手に取り、デジタルの名作を創り上げましょう！

HTML - Canvas

HTML Canvasとは？

まず、HTML Canvasとは何かを理解しましょう。デジタルの領域で、好きなことを自由に描ける白い紙を思い浮かべてください。それが、Canvasです。HTML要素で、JavaScriptを使ってグラフィックスを描いたり、アニメーションを作成したり、ゲームを開発したりすることができます。

例

簡単な例から始めましょう：

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

このコードは、あなたのウェブページ上にキャンバス要素を作成します。これが、アートを描くためのエasel（画架）のようなものです！

レンダリングコンテキスト

キャンバスができたら、それに描画する方法が必要です。ここで、レンダリングコンテキストが登場します。これをあなたの絵の具セットと考えてください。JavaScriptを使ってこのコンテキストを取得します：

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

ここで、私たちはキャンバスを取得し、2Dの描画ツールセットを要求しています。これが、鉛筆とパレットを手に取るようなものです！

ブラウザサポート

さらに進む前に、ブラウザサポートについて簡単に説明します。大多数の現代ブラウザはCanvasをサポートしていますが、確認するに越したことはありません。以下はサポートを検出する便利な方法です：

if (canvas.getContext) {
// Canvasはサポートされています
} else {
// Canvasはサポートされていません
}

このコードは、「ブラウザさん、このクールなキャンバスのことをできますか？」と尋ねるようなものです。それが「できます」と答えれば、進むことができます！

HTML Canvas - 四角形の描画

まずは簡単なものから始めましょう。四角形の描画です。Canvasにはこのための3つのメソッドがあります：

メソッド	説明
fillRect(x, y, width, height)	塗りつぶし四角形を描きます
strokeRect(x, y, width, height)	四角形の輪郭を描きます
clearRect(x, y, width, height)	指定された四角形の領域を消去します

以下はその例です：

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

このコードは、赤い四角形、青い輪郭の四角形、そして赤い四角形の一部を消去します。これが、クレヨンで描き、消しゴムで消すようなものです！

HTML Canvas - パスの描画

今度は少し創造的なパスの描画に挑戦してみましょう。パスは「点と点を結ぶパズル」のようなものです。以下のようにします：

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

これで三角形が作成されます。我们从(50, 50)开始，画到(200, 50)，然后到(200, 200)，最后闭合路径。これが、鉛筆を離さずに描くゲームのようなものです！

HTML Canvas - 線の描画

線の描画はパスと似ていますが、よりシンプルです。以下はその例です：

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

このコードは、キャンバスの左上から右中に向かって対角線を描きます。これが、2つの点を結ぶゲームのようなものです！

HTML Canvas - ベジェ曲線の描画

今度は曲線を加えましょう。ベジェ曲線は、絵の世界のエレガントな書き文字のようなものです：

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

これで、(20, 20)から始まり、(20, 100)と(200, 100)を制御点として、(200, 20)で終わる曲線が作成されます。これが、笑顔を描くようなものです！

HTML Canvas - 二次曲線の描画

二次曲線は、ベジェ曲線のよりシンプルな兄弟のようなものです：

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

これで、(20, 20)から(180, 20)に向かう曲線が作成され、(100, 100)が制御点です。これが、アーチを描くのに最適です！

HTML Canvas - 画像の使用

Canvasは描画だけでなく、画像も扱えます：

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

このコードは、画像を読み込み、キャンバスに描画します。これが、デジタルなスティッカーボードに貼り付けるようなものです！

HTML Canvas - グラデーションの作成

グラデーションで少し色を加えましょう：

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

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

これで、赤から青へのグラデーションが作成され、それを用いて四角形を塗りつぶします。これが、デジタルの夕焼けを作るようなものです！

HTML Canvas - スタイルと色

Canvasには、描画をスタイル化する様々な方法があります：

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

このコードは、黄色の四角形に黒い線のボーダーを描きます。これが、線を描き、色を塗るようなものですが、線を選ぶこともできます！

HTML Canvas - テキストとフォント

キャンバスにはテキストも追加できます：

ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

このコードは、30pxのArialフォントで「Hello, Canvas!」と書きます。これが、デジタルなアートにキャプションを追加するようなものです！

HTML Canvas - パターンと影

パターンと影で深みを加えましょう：

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

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

このコードは、パターンを用いた背景を作成し、影を追加した青い四角形を描きます。これが、デジタルな絵にテクスチャと深みを加えるようなものです！

HTML Canvas - 状態の保存と復元

Canvasでは状態を保存し、復元することもできます：

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

このコードは、赤い四角形を描き、その後青い四角形を描きます。これが、デジタルなアートの複数の層を作るようなものです！

HTML Canvas - 翻译

描画の原点を移動することができます：

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

このコードは、描画点を移動し、その後四角形を描きます。これが、紙を滑らせてから描き始めるようなものです！

HTML Canvas - 回転

描画に少し回転を加えましょう：

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

このコードは、キャンバスを回転させ、その後四角形を描きます。これが、紙を角度付けてから描くようなものです！

HTML Canvas - スケーリング

描画のスケールを変更することもできます：

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

このコードは、すべての描画を2倍のサイズにします。これが、 magnifying glass（拡大鏡）で作品を見るようなものです！

HTML Canvas - 変換

変換により、より複雑な操作が可能です：

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

このコードは、複雑な変換を適用してから描画します。これが、デジタルな世界を曲げるようなものです！

HTML Canvas - 合成

新しい描画が既存の描画とどのように干渉するかを制御できます：

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

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

このコードは、青い四角形を描き、その上に赤い四角形を描きます。これが、色の層を重ねるようなものです！

HTML Canvas - アニメーション

最後に、アニメーションでキャンバスを動かしましょう：

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

このコードは、スクリーンを横切る四角形を動かします。これが、自分の小さな映画を作るようなものです！

そして、ここまでがHTML Canvasの whirlwind tour（旋風的なツアー）です！Canvasをマスターする鍵は練習です。実験し、遊び、そして最も重要なのは、楽しむことです！あなたが次のデジタルの名作を創造するかもしれません。未来のPicasso（ピカソ）たち、楽しくコーディングを続けましょう！

Credits: Image by storyset