2

HTML5 ゲーム用のテクスチャ アトラス クラスを作成するのに忙しいのですが、画像の一部を回転して描画するのに問題があります。

たとえば、スプライトシートからサッカー ボールを抽出し、回転させて描画します。

次のフィドルを設定しました。ここでは、回転した画像を描画し、次に画像の一部を描画します。両方を同時に行う方法がわかりません:/

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

どんな助けでも大歓迎です!!! :)

4

1 に答える 1

0

画像の一部を描画しても、回転には影響しません。ソースの場所/スケール、および宛先の場所/スケールのプロパティを使用して、回転した画像を描画するだけです。

//
// 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();
于 2012-10-23T09:30:29.683 に答える