Изменение размера изображения - PullRequest
Новая
       1

Изменение размера изображения

0 голосов
/ 12 января 2019

Я не могу понять, как изменить формат изображения. Я пытаюсь сделать Dino Game из 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();
}

Ответы [ 2 ]

0 голосов
/ 12 января 2019

Используйте параметры 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>
0 голосов
/ 12 января 2019

Я считаю, что это то, что вы ищете. Вы не передали параметры ширины и высоты в drawIamge ctx.drawImage(dinoImg, x, y, width, height);

Подробнее на: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

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 = 'https://i.imgur.com/HeGEEbu.jpg';
		dinoImg.onload = function() {
		   //ctx.drawImage(dinoImg, 0, 0);
		   let width = 200;
		   let height = 200;
		   ctx.drawImage(dinoImg, 0, 0, width, height);
		}
	}

	function drawObst() {

	}

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

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

	startGame();
}
#gameArea {
    border:1px solid;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="gameArea" width="500" height="500"></canvas>
	</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...