如何在画布中旋转一个图像？

Question

我正在制作一个HTML5画布游戏,我希望旋转其中一个图像.

var link = new Image();
link.src='img/link.png';
link.onload=function(){
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
}

我希望旋转此图像.旋转图像的标准方法是在画布上下文对象上设置旋转.但是,这会旋转整个游戏!我不想这样做,只希望旋转这一个精灵.我怎么做？

Answer 1

使用.save()和.restore()(更多信息):

link.onload=function(){
    ctx.save(); // save current state
    ctx.rotate(Math.PI); // rotate
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
    ctx.restore(); // restore original states (no rotation etc)
}

Answer 2

您可能想放置一个translate();,因为图像将围绕原点旋转,默认情况下位于左上角,因此您可以使用它translate();来更改原点.

link.onload=function(){
    ctx.save();
    ctx.translate(x, y); // change origin
    ctx.rotate(Math.PI);
    ctx.drawImage(link,-10,-10,10,10);
    ctx.restore()
}

Answer 3

你原来的“解决方案”是：

ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y); 
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();

但是，使用以下代码可以提高效率（不使用save或）：restore

ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.rotate(this.angle - Math.PI/2.0);
ctx.translate(-x, -y); 

Answer 4

看看我的解决方案。这是完整的示例，也是最容易理解的。

    var drawRotate = (clockwise) => {
        const degrees = clockwise == true? 90: -90;
        let canvas = $('<canvas />')[0];
        let img = $(".img-view")[0];

        const iw = img.naturalWidth;
        const ih = img.naturalHeight;

        canvas.width = ih;
        canvas.height = iw;

        let ctx = canvas.getContext('2d');

        if(clockwise){
            ctx.translate(ih, 0);
        } else {
            ctx.translate(0, iw);
        }

        ctx.rotate(degrees*Math.PI/180);
        ctx.drawImage(img, 0, 0);

        let rotated = canvas.toDataURL();        
        img.src = rotated;
    }