Cách vẽ ngôi sao bằng HTML5 Canvas

Vẽ trên Canvas HTML thực hiện bằng JavaScript. Dùng getElementById() và getContext('2d') để lấy ngữ cảnh vẽ. Để vẽ ngôi sao, sử dụng phương thức lineTo() nối các đỉnh tính toán trước.

Ví dụ

Mã sau vẽ ngôi sao 5 cánh tô màu xanh dương:

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Tag</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>

Mẹo: Để vẽ ngôi sao đều đặn, hãy tính toán tọa độ bằng hàm sin/cos trong vòng lặp thay vì hard-code.