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, 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);

演示：小提琴