drawImage not drawing

Question

我正在嘗試繪製裁剪圖像並將其繪製到畫布上，但是在瀏覽器中運行時畫布保持白色。沒有錯誤出現。

var imgSprite = new Image(); 
imgSprite.src = 'sprite.png'; 
imgSprite.addEventListener('load', init, false); 

function init(){ 
    drawBg(); 

} 
function drawBg() { 
    var sourceX =0; 
    var sourceY =0; 
    var sourceWidth =800; 
    var sourceHeight =500; 
    var destWidth =800; 
    var destHeight =500; 
    var destX =0; 
    var destY =0; 
    //ctxBg.clearRect(0, 0, gameWidth, gameHeight); 
    ctxBg.drawImage(imgSprite, sourceX,sourceY,sourceWidth,sourceHeight, 
     destWidth,destHeight,destX,destY); 
} 

Answer 1

最後四個參數的drawImage是錯誤的順序。它應該是：

ctxBg.drawImage(imgSprite, sourceX,sourceY,sourceWidth,sourceHeight, 
     destX,destY,destWidth,destHeight); // x,y before width,height 

請參閱CanvasRenderingContext2D drawImage()瞭解所有重載和交互示例。

Answer 2

將參數設置不匹配任何可用的參數設置爲drawImage()

ctxBg.drawImage(imgSprite, 0, 0, gameWidth, gameHeight); 

演示：Fiddle