1

描いた画像を回転させようとしているときに、Javascript でプログラムを作成しています。グーグルで検索して答えを見つけようとしましたが、キャンバス全体を回転させる方法しかありませんでした。私が探しているのは、画像だけを回転させる方法です (次のように考えてください。戦士が歩いている方向に応じて戦士を回転させたいと考えています)。私は多くの異なるコードを試しましたが、すべて同じになり、キャンバス全体を回転させました。

これが私が使用したものの例です:

ctx.rotate(20*Math.PI/180); 

また:

var angle = 0; //init angle
images[0].onload = function () {
    ctx.drawImage(images[0], 0, 0);
    setInterval(function () {
        ctx.save();
        ctx.clearRect(-ctx.canvas.width / 2, -ctx.canvas.height / 2, ctx.canvas.width, ctx.canvas.height);
        ctx.rotate(Math.PI / 180 * (angle += 10)); //rotating at 10 degrees interval..
        ctx.drawImage(images[0], 0, 0);
        ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
        ctx.restore();
    }, 16);
}

私を助けてください

4

1 に答える 1