こんにちは！今回は、HTML5のCanvas要素を使って、可愛いリンゴを描く方法をご紹介します。
まずは完成コードを見てみましょう。
このコードをHTMLファイルにコピー＆ペーストすれば、ブラウザでリンゴを表示できます。
コードの詳細解説
＜1. HTMLとCanvasの準備＞
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: white;
}
</style>
</head>
<body>
<canvas id="appleCanvas" width="300" height="300"></canvas>
<script>
// JavaScriptコードがここに入ります
</script>
</body>
</html>
～解説～
- `<!DOCTYPE html>`でHTML5ドキュメントであることを宣言
- CSSでcanvasの背景色を白に設定
- `<canvas>`要素を作成し、幅と高さを300×300ピクセルに指定
- `id="appleCanvas"`を設定して、JavaScriptからこの要素を参照できるようにしています
＜2. Canvas描画コンテキストの取得＞
const canvas = document.getElementById('appleCanvas');
const ctx = canvas.getContext('2d');
～解説～
- `document.getElementById`でCanvas要素を取得
- `getContext('2d')`で2D描画コンテキストを取得しています。このコンテキストを使って、実際の描画操作を行います。
＜3. リンゴの形状を描く＞
// リンゴの本体を描く
ctx.beginPath();
ctx.moveTo(150, 120);
// 左側の曲線
ctx.bezierCurveTo(100, 120, 60, 160, 80, 220);
ctx.bezierCurveTo(90, 250, 120, 260, 150, 260);
// 右側の曲線
ctx.bezierCurveTo(180, 260, 210, 250, 220, 220);
ctx.bezierCurveTo(240, 160, 200, 120, 150, 120);
～解説～
ベジェ曲線を使ってリンゴの輪郭を描いています。
- `beginPath()`で新しい描画パスを開始
- `moveTo(150, 120)`で開始点を設定（リンゴの上部中央）
- 4つの`bezierCurveTo()`呼び出しで、リンゴの左側と右側を描画
ベジェ曲線の仕組み
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`で3次ベジェ曲線を描きます。
- `cp1x, cp1y`: 最初の制御点の座標
- `cp2x, cp2y`: 2番目の制御点の座標
- `x, y`: 曲線の終点
制御点は曲線自体の上には位置しませんが、曲線が「引っ張られる」方向を決定します。
これにより滑らかで自然な曲線が作れます。
＜4. グラデーションで色付け＞
// グラデーションの作成と適用
const gradient = ctx.createRadialGradient(130, 160, 10, 140, 180, 150);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(0.5, '#ee0000');
gradient.addColorStop(1, '#cc0000');
ctx.fillStyle = gradient;
ctx.fill();
～解説～
放射状グラデーションを作成して、リンゴに立体感を与えています。
- `createRadialGradient(x0, y0, r0, x1, y1, r1)`で放射状グラデーションを作成
- 最初の3つの引数：内側の円の中心座標(x0, y0)と半径(r0)
- 後の3つの引数：外側の円の中心座標(x1, y1)と半径(r1)
- `addColorStop()`で3つの色を指定：
- 0位置（中心）：明るい赤（#ff0000）
- 0.5位置（中間）：少し暗い赤（#ee0000）
- 1位置（外側）：さらに暗い赤（#cc0000）
- `fillStyle = gradient`でグラデーションを塗りつぶしスタイルに設定
- `fill()`で実際に塗りつぶしを実行
＜5. ハイライト（光沢）の追加＞
// ハイライトを追加（80度右に回転）
ctx.beginPath();
// -Math.PI/4 + 80度(ラジアン)
const rotationAngle = -Math.PI/4 + (80 * Math.PI / 180);
ctx.ellipse(120, 160, 15, 25, rotationAngle, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.fill();
～解説～
リンゴに光沢を追加して、立体的に見せています。
- 新しいパスを開始
- 回転角度を計算：元の-45度から80度右に回転
- `ellipse()`メソッドで楕円形のハイライトを描画
- 中心座標：(120, 160)
- X半径：15、Y半径：25
- 回転角度：計算した角度
- 開始角：0、終了角：2π（完全な楕円）
- 半透明の白色（rgba(255, 255, 255, 0.3)）で塗りつぶし
度からラジアンへの変換
JavaScriptの三角関数はラジアンを使用します。度からラジアンへの変換は
ラジアン = 度 × (π ÷ 180)
＜ 6. 葉の描画＞
// 葉っぱを描く
ctx.beginPath();
ctx.moveTo(150, 120);
// 左の葉
ctx.bezierCurveTo(140, 100, 120, 90, 130, 80);
ctx.bezierCurveTo(140, 70, 160, 85, 150, 120);
const leafGradient = ctx.createLinearGradient(130, 80, 150, 120);
leafGradient.addColorStop(0, '#4CAF50');
leafGradient.addColorStop(1, '#388E3C');
ctx.fillStyle = leafGradient;
ctx.fill();
～解説～
- 新しいパスを開始し、リンゴの上部中央から始める
- 2つのベジェ曲線で葉の形状を作成
- 線形グラデーションを作成：
- 開始点：(130, 80)
- 終了点：(150, 120)
- 色：明るい緑(#4CAF50)から暗い緑(#388E3C)へ
- グラデーションを塗りつぶしスタイルに設定して塗りつぶす
＜7. 茎の描画＞
// 茎を描く
ctx.beginPath();
ctx.moveTo(150, 120);
ctx.bezierCurveTo(150, 110, 160, 100, 170, 95);
ctx.lineWidth = 3;
ctx.strokeStyle = '#5D4037';
ctx.stroke();
～解説～
- 新しいパスを開始し、リンゴの上部中央から始める
- ベジェ曲線で緩やかに曲がった茎を作成
- 線の太さを3ピクセルに設定
- 線の色を茶色(#5D4037)に設定
- `stroke()`でパスを線として描画（塗りつぶしではなく輪郭線）
＜ Canvas描画の基本＞
パスとは何か？
Canvasでの描画は「パス」を中心に行われます。
パスは一連の点、線、曲線の集まりで、これらを組み合わせて形状を作ります。
1. `beginPath()`：新しいパスの開始
2. `moveTo()`, `lineTo()`, `bezierCurveTo()`など：パスの構成
3. `fill()`：パスの内側を塗りつぶす
4. `stroke()`：パスの輪郭を線で描く
複数の形状を描く場合は、それぞれの形状ごとに新しいパスを開始します。
グラデーションの種類
Canvasでは主に2種類のグラデーションが使えます。
1. 線形グラデーション（`createLinearGradient()`）
- 直線に沿って色が変化
- 葉に使用している例
2. 放射状グラデーション（`createRadialGradient()`）
- 円の中心から外側に向かって色が変化
- リンゴの本体に使用している例
両方とも`addColorStop()`で色の変化点を指定します。
今回はHTML5 Canvasを使って美しいリンゴを描く方法をご紹介しました。
WEBは奥が深くて面白いですね！是非試してみてください。
・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・＊・☆・
【PR】
