วิธีวาดดาวด้วย HTML5 Canvas

บทนำ

การวาดดาวบน Canvas ใช้เมธอด lineTo() เชื่อมต่อจุดต่างๆ เพื่อสร้างรูปดาว โดยคำนวณพิกัดแต่ละจุดของดาว

ตัวอย่างโค้ด

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Star</title>
  </head>
  <body>
    <canvas id="newCanvas" width="300" height="250"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = "blue";
      ctx.beginPath();
      ctx.moveTo(108, 0.0);
      ctx.lineTo(141, 70);
      ctx.lineTo(218, 78.3);
      ctx.lineTo(162, 131);
      ctx.lineTo(175, 205);
      ctx.lineTo(108, 170);
      ctx.lineTo(41.2, 205);
      ctx.lineTo(55, 131);
      ctx.lineTo(1, 78);
      ctx.lineTo(75, 68);
      ctx.lineTo(108, 0);
      ctx.closePath();
      ctx.fill();
    </script>
  </body>
</html>

วิธีคำนวณพิกัดดาว

ดาว 5 จุดมีมุมภายใน 36 องศา สามารถคำนวณได้จาก:

function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var x = cx;
  var y = cy;
  var step = Math.PI / spikes;

  ctx.beginPath();
  ctx.moveTo(cx, cy - outerRadius);
  for (i = 0; i < spikes; i++) {
    x = cx + Math.cos(rot) * outerRadius;
    y = cy + Math.sin(rot) * outerRadius;
    ctx.lineTo(x, y);
    rot += step;
    x = cx + Math.cos(rot) * innerRadius;
    y = cy + Math.sin(rot) * innerRadius;
    ctx.lineTo(x, y);
    rot += step;
  }
  ctx.lineTo(cx, cy - outerRadius);
  ctx.closePath();
}