javascript - 更改图像大小

Question

我不知道如何更改图像的格式。我正在尝试从 Google Chrome 制作恐龙游戏。并且更改图像大小将不起作用。

我的代码:

window.onload = function() {
var cvs = document.getElementById("gameArea");
var ctx = cvs.getContext("2d");

var dino;
var obst = [];

function drawDino() {
    var dinoImg = new Image();
    dinoImg.src = 'dino.png';
    dinoImg.onload = function() {
        ctx.drawImage(dinoImg, 0, 0);
        this.style.width = 100;
        this.style.height = 100;
    }
}

function drawObst() {

}

function draw() {
    drawDino();
    drawObst();
}

function startGame() {
    setInterval(draw,50);
}

startGame();
}

Answer 1

使用drawImage的参数用于调整图像大小。

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

window.onload = function() {
    var cvs = document.getElementById("gameArea");
    var ctx = cvs.getContext("2d");

    var dino;
    var obst = [];

    function drawDino() {
        var dinoImg = new Image();
        dinoImg.src = 'http://lorempixel.com/400/200/'; //'dino.png';
        dinoImg.onload = function() {
            ctx.drawImage(dinoImg, 0, 0, 100, 100);
        }
    }

    function drawObst() {

    }

    function draw() {
        drawDino();
        drawObst();
    }

    function startGame() {
        setInterval(draw,1000);
    }

    startGame();
}

<canvas id="gameArea"></canvas>