Để quay trong HTML5 Canvas, chúng ta dùng phương thức rotate(). Phương thức này được định nghĩa với một góc trong đường tròn.

Cú pháp:

1

context.rotate(angle);

Ví dụ về HTML5 Canvas Rotate

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var rectWidth = 150;
    var rectHeight = 75;
 
    // chuyển tâm về giữa canvas
    context.translate(canvas.width / 2, canvas.height / 2);
    // Quay 45 độ theo chiều kim đồng hồ
    context.rotate(Math.PI / 4);
 
    context.fillStyle = "blue";
    context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);
};