長方形とパスを描画する
fillRect、strokeRect、パスコマンドで図形を描画します
「長方形とパスを描画する」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
Canvasのセットアップ
<canvas>要素では、ピクセル単位のサイズを指定するために、width属性とheight属性を明示的に設定する必要があります。2Dコンテキストを取得します: const ctx = canvas.getContext("2d")。すべての描画操作では、このコンテキストオブジェクトを使用します。
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRectとstrokeRect
パスを使わずに長方形を描画できます: ctx.fillRect(x, y, width, height)は塗りつぶした長方形を描画します。ctx.strokeRect(x, y, width, height)は輪郭を描画します。描画する前にctx.fillStyleとctx.strokeStyleを設定します。
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRectで消去
ctx.clearRect(x, y, width, height)はピクセルを透明にします。領域を再描画する前の消去に使用します。これはアニメーションに不可欠です。各フレームでキャンバスを消去し、新しい位置にすべてを再描画します。
パスの基本
パスで図形を定義します。開始: ctx.beginPath()。始点へ移動: ctx.moveTo(x, y)。線を描画: ctx.lineTo(x, y)。閉じる: ctx.closePath()。描画: ctx.fill()またはctx.stroke()。
線の描画
三角形の例: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke()。closePathは終点から始点に戻る最後の線分を自動的に描画するため、最初の座標を繰り返す必要はありません。
円弧と円
ctx.arc(cx, cy, radius, startAngle, endAngle)。完全な円: ctx.arc(100, 100, 50, 0, Math.PI * 2)。角度はラジアンで指定します。0は右側（3時の位置）、Math.PIは左側（9時の位置）です。
ベジェ曲線
ctx.quadraticCurveTo(cpx, cpy, x, y)は、1つの制御点を使って2次ベジェ曲線を描画します。ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)は、2つの制御点を使って滑らかな3次ベジェ曲線を描画します。
塗りつぶしスタイル
fillStyleには、色の文字列、線形グラデーション（ctx.createLinearGradient()）、放射状グラデーション（ctx.createRadialGradient()）、パターン（ctx.createPattern(image, repeat)）を指定できます。単色以外の複雑な塗りつぶしを適用して、豊かな視覚効果を実現できます。
線のスタイル
線の外観を制御します: ctx.lineWidth（ピクセル単位の幅）、ctx.lineCap（「butt」、「round」、「square」）、ctx.lineJoin（「miter」、「round」、「bevel」）、ctx.setLineDash([5, 3])（長さが交互に変わる破線）。
保存と復元
ctx.save()は現在の状態（fillStyle、strokeStyle、lineWidth、transform、clip）をスタックに追加します。ctx.restore()はスタックから取り出して復元します。関係のない描画操作の間でスタイルが引き継がれないように、複雑な描画処理をsave/restoreで囲みます。
座標系
Canvasの原点（0,0）は左上隅です。Xは右方向に増加し、Yは下方向に増加します。変換（translate、rotate、scale）によって座標系を変更できるため、絶対座標を手動で計算せず、ローカルな原点を基準に描画できます。
理解度チェック
パスを描画する前にctx.beginPath()を呼び出すと、何が行われますか？
まとめ
Canvas 2Dの描画では、長方形（fillRect、strokeRect）、パス（beginPath、moveTo、lineTo、arc、bezierCurveTo）、スタイル（fillStyle、strokeStyle、lineWidth）、状態管理（save/restore）に対応するコンテキストメソッドを使用します。これらの基本機能を身につけると、単純な構成要素から複雑なグラフィックスを構築できるようになります。
よくある質問
「長方形とパスを描画する」レッスンは無料ですか？
はい。「長方形とパスを描画する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「長方形とパスを描画する」で何を学びますか？
fillRect、strokeRect、パスコマンドで図形を描画します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「長方形とパスを描画する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。