HTML 5 Canvas Image Rendering - PullRequest
Новая
       16

HTML 5 Canvas Image Rendering

2 голосов
/ 13 февраля 2012

Первый постер здесь, но определенно не первый раз.

Мой вопрос направлен непосредственно на ту часть кода, которая у меня есть. В настоящее время я изучаю, как работают холсты HTML 5, и разрабатываю свою собственную игру в стиле RPG для университетского проекта. Посмотрев вокруг, я нашел несколько хороших уроков в этом блоге для парней, следил за его кодом и трижды проверял его, но теперь появляются изображения.

Я пытался поместить alert () до и после того, как изображение вызывается на холст в drawMap (). Это работает до того, как изображение нарисовано, но не после, что наводит меня на мысль, что это как-то связано с рендерингом изображения. Может ли кто-нибудь перепроверить мой код и посмотреть, что происходит? Это сводит меня с ума! 

<canvas id="game-viewport" width="760" height="440"></canvas>

<script>

    window.onload = init;

    var map = Array([0,0],[0,0],[0,0],[0,0]);
    var tileSize = 40;

    tileTypes = Array("grass.png");
    tileImage = new Array();

    var loaded = 0;
    var loadTimer;

    function loadImage(){
        for(i = 0; i < tileTypes.length; i++){
            tileImage[i] = new Image();
            tileImage[i].src = "./game/lib/icons/own_icons/" + tileTypes[i];
            tileImage[i].onload = function(){
                loaded++;
            }
        }
    }

    function loadAll(){
        if(loaded == tileTypes.length){
            clearInterval(loadTimer);
            drawMap();
        }
    }

    function drawMap(){
        var mapX = 80;
        var mapY = 10;

        for(i = 0; i < map.length; i++){
            for(j = 0; j < map[i].length; j++){
                var drawTile = map[i][j];
                var xPos = (i - j) * tileSize;
                var yPos = (i + j) * tileSize;
                ctx.drawImage(tileImage[drawTile], xPos, yPos);
            }
        }
    }

    function init(){
        var canvas = document.getElementById('game-viewport')
        var ctx = canvas.getContext('2d');
        loadImage();
        loadTimer = setInterval(loadAll, 100);
    }

</script>

1 Ответ

3 голосов
/ 13 февраля 2012

Единственная проблема в том, что ctx не определено в вашей функции drawMap.

Либо передайте ctx в функцию в качестве аргумента, либо сделайте ее глобальной переменной.

Я был ленив и сделал второе, но ты действительно должен сделать первое. Рабочий код:

http://jsfiddle.net/YUddC/

Вы действительно должны иметь отладчик Chrome (или любой другой браузер, который вы используете) в 100% времени, которое вы разрабатываете. Если вы это сделаете, вы увидите ошибку, говорящую, что ctx не определено в drawMap. Если вы используете Chrome и нажимаете F12, чтобы открыть инструменты разработчика и перейти на вкладку скриптов, вы увидите следующее:

enter image description here

Что делает проблему довольно ясной!

...