ctx.fillStyle = "rgb(250,0,0)";
ctx.save();
ctx.translate(50,50); //这个translate(50,50)发生在rotate()之前,其目的是将旋转点从默认点(0,0),移动到(50,50),下面紧跟着的rotate就是按照这个点来转
//rotate方法的旋转点完全是按照[在其上\紧跟着它的]translate来确定旋转点的...
ctx.rotate(-Math.PI/8);
ctx.translate(-50,-50);//这个translate是在rotate之下,也就是rotate已经转过了再执行translate(-50,-50),它其实也是将坐标点从(50,50)重新移到了(0,0),紧跟在他下面的rotate旋转中心就是按照(0,0)来旋转的
ctx.fillRect(50,50,100,200);
//ctx.beginPath();
ctx.fillStyle="rgb(0,255,0)"
ctx.rotate(-Math.PI/6);
ctx.fillRect(50,50,100,200);
ctx.restore();
ctx.fillStyle = "rgb(0,0,250)";
ctx.fillRect(50,50,5,5);