繪圖畫布（帶的drawImage）到另一個不工作

我試圖做一個遊戲，所有敵人被吸引到一個單一的畫布（ctxEnemy），但我有使他們面臨着不同的位置有些困難，因爲使用旋轉畫布功能，它將同時旋轉它們的全部。繪圖畫布（帶的drawImage）到另一個不工作

我的想法整理了這一點，是真正吸引他們的一個輔助帆布，即旋轉畫布，才把它拉進主畫布。如果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); 
}

來源

2014-04-08 user3509357

我們需要看到更多的代碼，以確定問題。請爲敵人發佈課程（相關部分如果很長），以及您如何設置輔助畫布。小提琴也可以創造奇蹟。 – K3N

演示使用這個簡單的spritsheet（2個精靈）：http://jsfiddle.net/m1erickson/ZJunX/

enter image description here

首先定義，其中每個單獨的精靈對你的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是你想讓精靈旋轉的角度

來源

2014-04-08 05:25:42 markE

繪圖畫布（帶的drawImage）到另一個不工作

回答

相關問題