javascript - drawImage 不绘图

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, 0, 0, gameWidth, gameHeight);

演示：小提琴

Answer 2

drawImage 的最后四个参数顺序错误。它应该是：

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

有关所有重载和交互式示例，请参阅CanvasRenderingContext2D drawImage()。