HTML5畫布繪製旋轉圖像部分

Question

我正忙於爲我的HTML5遊戲編寫紋理圖集類，但是， 我在繪製圖像的旋轉部分時遇到問題。

例如：從spritesheet中提取足球並旋轉繪製。

我已經設置了以下小提琴，我在那裏繪製圖像旋轉，然後將圖像的一部分，我只是無法弄清楚如何在同一時間做兩：/

http://jsfiddle.net/9ztnF/10/

的代碼，我需要幫助的部分如下：

targetX = 450; 
targetY = 35; 
context.save(); 
context.translate(targetX, targetY); 
context.translate(halfWidth, halfHeight); 
context.rotate(60 * TO_RADIANS); 

// Help needed HERE!!!!! 

// draws full image rotated at half height 
// context.drawImage(logoImage, -halfWidth, -halfHeight, halfWidth, halfHeight); 

// draws nothing that is visible 
//context.drawImage(logoImage, -halfWidth, -halfHeight, halfWidth, halfHeight, targetX, targetY, halfWidth, halfHeight); 

context.restore(); 

任何幫助將不勝感激！ :)

Answer 1

繪製圖像的一部分不影響旋轉。只需繪製帶有源位置/比例和目標位置/比例屬性的旋轉圖像即可：

// 
// Draw rotated image 
// 
targetX = 50; 
targetY = 35; 
context.save(); 
context.translate(targetX, targetY); // move the origin to 50, 35 
context.translate(halfWidth, halfHeight); // move across and down half the width and height of the image 
context.rotate(60 * TO_RADIANS); // rotate around this point 
context.drawImage(logoImage, halfWidth, halfHeight, halfWidth, halfHeight, 0, 0, halfWidth, halfHeight); // then draw the image back and up 
context.restore();