0

Tenho um index.html com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <title> HTML 5 - Airplane Game</title>
    <link rel="stylesheet" href="gamestyle.css"/>
</head>
<body>

    <canvas id="canvasBg">Your Browser does not support HTML5</canvas>
    <script type="text/javascript" src="game.js"></script>
</body>
</html>

E um estilo no meu css:

#canvasBg {
    width: 800px;
    height: 500px;
    display: block;
    margin: 100px auto;
    background-color: #606060;
}

E eis meu código JS:

var canvas = document.getElementById("canvasBg");
var ctxBg = canvasBg.getContext('2d');

var imgSprite = new Image();
imgSprite.src = "img/sprite.png";

window.addEventListener("load",init,false);

function init() {
   ctxBg.drawImage(imgSprite,0,0,1600,500,0,0,1600,500);
}

Imagem a ser utilizada : https://raw.githubusercontent.com/gyrostorm/html5-game-dev-series/gh-pages/images/sprite.png

Gostaria de mostrar apenas o cenário quando chamar a função init. Por que isso não esta acontecendo?

1 Resposta 1

2

Como seu script é incluído após o canvas, você nem precisa esperar o load do window para desenhar. Mas precisa esperar o load da imagem:

var canvas = document.getElementById("canvasBg");
var ctxBg = canvas.getContext('2d');

var imgSprite = new Image();
imgSprite.src = "https://raw.githubusercontent.com/gyrostorm/html5-game-dev-series/gh-pages/images/sprite.png";
imgSprite.onload = function() {
    ctxBg.drawImage(imgSprite,0,0,1600,500,0,0,1600,500);
}

Fora isso, atenção: defina as dimensões do canvas como atributos do próprio canvas, e não no CSS. Quando você define no CSS, o conteúdo é escalado junto, como você pode ver neste exemplo.

1
  • Perfeito! Sanou minha duvida. Grato. 25/07/2014 às 22:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .