HTML5 canvas旋转绘制图像部分

Question

我正忙于为HTML5游戏编写Texture Atlas类，但是在旋转绘制图像部分时遇到了麻烦。

例如：从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();