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