canvas rotate中心点问题详解

 

  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);