将画布（使用drawImage）绘制到另一个不起作用的画布中

Question

我正在尝试制作一个游戏，所有敌人都被绘制成一个画布（ctxEnemy），但我遇到一些困难使它们面向不同的位置，因为使用旋转画布功能它会旋转所有这些都在同一时间。

我想要解决这个问题的方法是实际在辅助画布中绘制它们，旋转画布，然后将其绘制到主画布中。如果drawImage()没有崩溃，那就没问题了......

我已经能够在代码的第一行使用ctxEnemy.drawImage(ctxAux,0,0)进行测试，但每当我将它放在任何绘图函数中时，它都会停止工作。

问题：有人可以解释为什么drawImage()不起作用，或者甚至可能给我另一个更简单的解决方案吗？

Enemy.prototype.draw = function(){
    ctxAux.clearRect(0,0,gameWidth,gameHeight);
    ctxAux.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
    //ctxAux.rotate(some angle);
    ctxEnemy.drawImage(ctxAux,0,0);
}

Answer 1

使用这个简单的spritsheet（2个精灵）演示：http://jsfiddle.net/m1erickson/ZJunX/

首先定义每个精灵在spritesheet上的位置：

var sprites={
    shipOff:{x:0,y:0,w:90,h:90},
    shipOn:{x:90,y:0,w:90,h:90},
}

如果你想围绕它的中心点旋转你的敌人，那么这个功能将吸引你的敌人：

function drawEnemy(spritename,drawCenterX,drawCenterY,radianAngle){

    // get the desired sprite info from sprites[]
    var sprite=sprites[spritename];

    // save the unrotated context state
    ctx.save();

    // translate to the desired rotation point
    ctx.translate(drawCenterX,drawCenterY);

    // rotate by the desired angle
    ctx.rotate(radianAngle);

    // clip this desired sprite from the spritesheet and 
    // draw it on the canvas
    ctx.drawImage(spritesheet,
        sprite.x,sprite.y,sprite.w,sprite.h,
        -sprite.w/2,-sprite.h/2,sprite.w,sprite.h
    );

    // restore the context to its unrotated state
    ctx.restore();
}

函数参数：

• spritename是你精灵对象的名字（例如“shipOn”）

• drawCenterX / drawCenterY是画布上你的敌人将被绘制的地方（敌人精灵图像的中心位于drawCenterX / drawCenterY）

• radianAngle是您想要旋转精灵的角度