Canvas 基礎繪圖教學：從矩形到路徑

<canvas id="exampleRect" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById("exampleRect");
  const ctx = canvas.getContext("2d");

  // 設定填充與描邊樣式
  ctx.fillStyle = "blue";    // 填充色:藍色
  ctx.strokeStyle = "red";   // 邊框色:紅色

  // 繪製藍色填滿矩形
  ctx.fillRect(20, 20, 100, 100);

  // 清除一塊矩形區域(將其變透明)
  ctx.clearRect(40, 40, 60, 60);

  // 繪製紅色邊框矩形
  ctx.strokeRect(50, 50, 40, 40);
</script>

<canvas id="examplePath" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById("examplePath");
  const ctx = canvas.getContext("2d");

  // **繪製填滿的三角形**
  ctx.beginPath();          // 開始新路徑
  ctx.moveTo(50, 150);      // 移動畫筆至起點 (50,150)
  ctx.lineTo(150, 150);     // 畫線到 (150,150)
  ctx.lineTo(100, 50);      // 畫線到 (100,50) — 形成三角形的第三個點
  ctx.fill();               // 填滿路徑(自動封閉路徑並填充)

  // **繪製空心的三角形**
  ctx.beginPath();          // 開始新路徑(不與之前的路徑相連)
  ctx.moveTo(50, 50);       // 起點 (50,50)
  ctx.lineTo(150, 50);      // 畫線到 (150,50)
  ctx.lineTo(150, 150);     // 畫線到 (150,150)
  ctx.closePath();          // 手動封閉路徑(將最後一點連回起點)
  ctx.stroke();             // 描邊繪製三角形邊框
</script>

<canvas id="exampleArc" width="250" height="150"></canvas>
<script>
  const canvas = document.getElementById("exampleArc");
  const ctx = canvas.getContext("2d");

  // 繪製一個圓形的邊框
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, false);  // 從0到2π,即一整圈
  ctx.strokeStyle = "green";
  ctx.lineWidth = 5;
  ctx.stroke();  // 描邊出綠色圓形

  // 繪製一段圓弧(例如四分之一圓)
  ctx.beginPath();
  ctx.arc(175, 75, 50, 0, Math.PI / 2, false);  // 從0到 π/2,四分之一圓
  ctx.strokeStyle = "orange";
  ctx.lineWidth = 5;
  ctx.stroke();  // 描邊出橘色弧線
</script>

<canvas id="exampleQuadCurve" width="300" height="200"></canvas>
<script>
  const canvas = document.getElementById("exampleQuadCurve");
  const ctx = canvas.getContext("2d");

  // 定義二次貝茲曲線的三個關鍵點
  const startX = 50, startY = 150;           // 起點
  const cp1X   = 150, cp1Y   = 50;           // 控制點
  const endX   = 250, endY   = 150;          // 終點

  // 繪製二次貝茲曲線
  ctx.beginPath();
  ctx.moveTo(startX, startY);                // 移動到起點
  ctx.quadraticCurveTo(cp1X, cp1Y, endX, endY);  // 繪製二次貝茲曲線到終點
  ctx.strokeStyle = "blue";
  ctx.lineWidth = 3;
  ctx.stroke();                             // 描邊繪製曲線

  // 繪製控制點和輔助線(幫助理解曲線形狀)
  ctx.fillStyle = "red";
  ctx.beginPath();                          // 繪製控制點(紅色圓點)
  ctx.arc(cp1X, cp1Y, 5, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "black";
  ctx.beginPath();                          // 繪製起點和終點(黑色圓點)
  ctx.arc(startX, startY, 5, 0, Math.PI * 2);
  ctx.arc(endX, endY, 5, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();                          // 畫出虛線輔助線連接控制點與兩端
  ctx.setLineDash([5, 5]);
  ctx.moveTo(startX, startY);
  ctx.lineTo(cp1X, cp1Y);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = "gray";
  ctx.stroke();
</script>

<canvas id="exampleCubicCurve" width="300" height="250"></canvas>
<script>
  const canvas = document.getElementById("exampleCubicCurve");
  const ctx = canvas.getContext("2d");

  // 定義三次貝茲曲線的關鍵點
  const startX = 50,  startY = 200;         // 起點
  const cp1X   = 50,  cp1Y   = 50;          // 控制點1
  const cp2X   = 250, cp2Y   = 50;          // 控制點2
  const endX   = 250, endY   = 200;         // 終點

  // 繪製三次貝茲曲線
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
  ctx.strokeStyle = "purple";
  ctx.lineWidth = 3;
  ctx.stroke();

  // 繪製控制點和輔助線以輔助觀察
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(cp1X, cp1Y, 5, 0, Math.PI * 2);   // 控制點1(紅色)
  ctx.arc(cp2X, cp2Y, 5, 0, Math.PI * 2);   // 控制點2(紅色)
  ctx.fill();
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(startX, startY, 5, 0, Math.PI * 2);  // 起點(黑色)
  ctx.arc(endX, endY, 5, 0, Math.PI * 2);      // 終點(黑色)
  ctx.fill();
  ctx.beginPath();
  ctx.setLineDash([5, 5]);                    // 虛線連線控制點和端點
  ctx.moveTo(startX, startY);
  ctx.lineTo(cp1X, cp1Y);
  ctx.lineTo(cp2X, cp2Y);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = "gray";
  ctx.stroke();
</script>

<canvas id="exampleFreeDraw" width="400" height="200" style="border:1px solid #ccc"></canvas>
<script>
  const canvas = document.getElementById("exampleFreeDraw");
  const ctx = canvas.getContext("2d");
  let drawing = false;  // 用於記錄目前是否正在繪圖狀態

  // 畫筆樣式設定
  ctx.strokeStyle = "darkred";
  ctx.lineWidth = 4;
  ctx.lineCap = "round";  // 線條端點圓潤,讓書寫筆跡更自然

  // 滑鼠按下:開始新的繪圖路徑
  canvas.addEventListener("mousedown", (e) => {
    drawing = true;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);  // 將畫筆移動到起始點
  });

  // 滑鼠移動:若處於繪圖狀態,則繪製連續的曲線
  canvas.addEventListener("mousemove", (e) => {
    if (!drawing) return;
    ctx.lineTo(e.offsetX, e.offsetY);  // 畫線到滑鼠所在位置
    ctx.stroke();                     // 繪製當前線段
  });

  // 滑鼠放開或移出畫布:結束繪圖路徑
  canvas.addEventListener("mouseup", () => {
    drawing = false;
  });
  canvas.addEventListener("mouseleave", () => {
    drawing = false;
  });
</script>

<canvas id="exampleText" width="400" height="100"></canvas>
<script>
  const canvas = document.getElementById("exampleText");
  const ctx = canvas.getContext("2d");

  ctx.font = "24px Microsoft JhengHei";   // 設定字型和大小
  ctx.fillStyle = "black";
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;

  ctx.fillText("Hello Canvas!你好 Canvas!", 20, 40);   // 實心文字
  ctx.strokeText("Hello Canvas!你好 Canvas!", 20, 80); // 空心描邊文字
</script>