HTML5画布绘制带旋转的图像部分

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