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