旋转两个长方形帆布

Question

我有20x20px和另有一个矩形5x3px像图像

我想从旋转中心的整个矩形。

我试过这个，但不起作用。

//Rectangle 
ctx.translate(pX,pY); 
ctx.rotate((Math.PI/2*gravity)); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0, pHeight, pWidth); 

//blue Rectagle  
ctx.translate(pX+(pWidth-5),pY+(pHeight/2)); 
ctx.fillStyle = "#000FFF"; 
ctx.fillRect(0,0,5,3); 
ctx.translate(-(pX+(pWidth-5)),-(pY+(pHeight/2))); 

ctx.rotate(-(Math.PI/2*gravity)); 
ctx.translate(-pX,-pY); 

Answer 1

可以忽略第二转动而只是绘制第二个矩形偏移，如果它是不旋转的：

//Rectangle 
ctx.translate(pX,pY); 
ctx.rotate((Math.PI/2*gravity)); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0, pHeight, pWidth); 

//blue Rectagle  
ctx.fillStyle = "#000FFF"; 
ctx.fillRect(pWidth-5, pY+(pHeight/2), 5,3); 

ctx.setTransform(1,0,0,1,0,0); // reset all transforms with identity matrix 

只是注意，由于该代码是和是矩形将从旋转它的角落。要调整为做此调整：

//Rectangle 
ctx.translate(pX,pY); 
ctx.rotate((Math.PI/2*gravity)); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(-pHeight*0.5, -pWidth*0.5, pHeight, pWidth); // centered 

//blue Rectagle  
ctx.fillStyle = "#000FFF"; 
ctx.fillRect(pWidth*0.5-5, 0, 5,3); // centered 

ctx.setTransform(1,0,0,1,0,0); // reset all transforms with identity matrix 

Live demo