旋轉兩個長方形帆布

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