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

演示：Fiddle

Answer 2

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

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

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

drawImage没有绘图

2 个答案: