Xoay HTML5 Canvas quanh gốc tọa độ hiện tại

HTML5 canvas cung cấp phương thức rotate(angle) được dùng để xoay canvas quanh gốc tọa độ hiện tại.

Phương thức này chỉ nhận một tham số là góc xoay của canvas. Đây là xoay theo chiều kim đồng hồ được đo bằng radian.

Ví dụ

Bạn có thể thử chạy mã sau để xoay HTML Canvas −

<!DOCTYPE HTML> <html>    <head>       <style>          #test {             width: 100px;             height:100px;             margin: 0px auto;          }       </style>       <script>          function drawShape(){             // lấy phần tử canvas bằng DOM             var canvas = document.getElementById('mycanvas');                         // Đảm bảo không thực thi khi canvas không được hỗ trợ             if (canvas.getContext){                // sử dụng getContext để dùng canvas cho vẽ                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('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');             }          }       </script>    </head>      <body id = "test" onload = "drawShape();">       <canvas id = "mycanvas" width = "400" height = "400"></canvas>    </body> </html>