図形とパスを描画する
長方形、円弧、カスタムパスを描画します。
「図形とパスを描画する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
まずは長方形
長方形には専用のショートカットがあります。fillRect、strokeRect、clearRect です。いずれも (x, y, width, height) を受け取ります。
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);パスの開始
長方形以外のものを描くには、パスを作成します。beginPath() を呼び出して新しいパスを開始し、セグメントを追加してから stroke() または fill() を呼び出します。
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo と lineTo
moveTo(x, y) はペンを持ち上げ、描画せずに指定位置へ移動します。lineTo(x, y) は現在の点から新しい点まで直線を描画します。
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();パスを閉じる
closePath() は開始点まで線を描画し、輪郭を完成させます。多角形に便利です。
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();図形の塗りつぶし
fill() は、fillStyle を使って現在のパスの内部を塗りつぶします。同じパスを塗りつぶしと線の描画の両方に使えます。
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();arc による円の描画
arc(x, y, radius, startAngle, endAngle) は円弧を描画します。角度の単位はラジアンです。完全な円は0から 2 * Math.PI までです。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();部分的な円弧と扇形
開始角度と終了角度を使って、くさび形の図形を描画します。中心まで lineTo でつなぐと扇形になります。
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();二次曲線とベジェ曲線
quadraticCurveTo(cpx, cpy, x, y) と bezierCurveTo(...) は、制御点を使って滑らかな曲線を描画します。
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();線のスタイル設定
lineWidth、lineCap（butt/round/square）、lineJoin（miter/round/bevel）、setLineDash を使って、線の見た目を制御します。
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();塗りつぶしルール
fill() には、重なり合うサブパスをどのように塗りつぶすかを決める "nonzero"（デフォルト）または "evenodd" を指定できます。穴のある図形に便利です。
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut塗りつぶしとしてのグラデーション
createLinearGradient でグラデーションを作成し、カラーストップを追加してから fillStyle に割り当てます。
const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);クイックチェック
パスについての理解度を確認します。
まとめ: 図形とパス
長方形の描画、beginPath/moveTo/lineTo/closePath によるパスの作成、arc による円の描画、曲線の追加、線のスタイル設定、色やグラデーションによる塗りつぶしができるようになりました。次は、画像とテキストです。
よくある質問
「図形とパスを描画する」レッスンは無料ですか？
はい。「図形とパスを描画する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「図形とパスを描画する」で何を学びますか？
長方形、円弧、カスタムパスを描画します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「図形とパスを描画する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。