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