캔버스는 회전하는 그래픽을 그립니다.

캔버스에 그려진 요소 회전:

1. 그림을 그릴 때 캔버스의 좌표축 상태를 조작하여 그래픽을 회전하는 목적을 달성합니다. 즉, 캔버스 원점 이동, 좌표축 회전,

2. DOM 요소 조작 및 캔버스 직접 회전

캔버스의 좌표축 상태 조작:

var rect = {w:200,h:50,x:100,y:100};
 
    function rotateCanvas(){
        var angle = document.getElementById('angle').value;
        ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
        ctx.translate(rect.x+rect.w/2,rect.y+rect.h/2);   //坐标原点平移至该图形的中心点
        ctx.rotate(angle*Math.PI/180);                    //旋转坐标轴
        //ctx.scale(0.5,0.5);
        ctx.translate(-(rect.x+rect.w/2),-(rect.y+rect.h/2)); //坐标原点平移至初始位置
        //ctx.scale(1,1);
        ctx.fillRect(rect.x,rect.y,rect.w,rect.h); 
    }