หมุน HTML5 Canvas รอบจุดกำเนิดปัจจุบัน

HTML5 Canvas มีเมธอด rotate(angle) สำหรับหมุนแคนวาสรอบจุดกำเนิดปัจจุบัน

เมธอดนี้รับพารามิเตอร์เพียงตัวเดียวคือมุมการหมุน ซึ่งวัดเป็นเรเดียนและหมุนในทิศทางตามเข็มนาฬิกา

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อหมุน HTML Canvas:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #test {
        width: 100px;
        height: 100px;
        margin: 0px auto;
      }
    </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.translate(100, 100);
          for (i = 1; i < 7; i++) {
            ctx.save();
            ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (200 - 51 * i) + ',0)';
            for (j = 0; j < i * 6; j++) {
              ctx.rotate(Math.PI * 2 / (i * 6));
              ctx.beginPath();
              ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
              ctx.fill();
            }
            ctx.restore();
          }
        } else {
          alert('คุณต้องใช้ Safari หรือ Firefox 1.5+ เพื่อดูตัวอย่างนี้');
        }
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>