Не рисуют изображения canvas

213

24 июля 2017, 12:41

Привет!

Имею следующий код :

    for(var i = 0; parseInt(canvas.width / blockSize)>i;i++){


      console.log('Кря');
      GetImageToCanvas('grassGame.png', function(image){
        console.log('load image');
        console.log('image : ' + image);
         console.log(c.drawImage(image, (i == 0) ? blockSize :  blockSize*i, 0, blockSize, blockSize));
      })


    }
    function GetImageToCanvas(img, cb){
      var image = new Image();
      image.src='images/'+img;
      image.onload=function(){
        cb(image);
      };
    }

Проблема в том, что рисует лишь последнее изображение.

Answer 1

Вам просто не нужно создавать каждый раз новое изображение при вызове функции рисования. Вот небольшой пример отрисовки изображения циклом(разбор этого примера). Если вы разрабатываете какую либо игру, лучше используйте фреймворки, типа Pixi или Phaser.

var example = document.getElementById("example"), 
    ctx = example.getContext('2d'), 
    cellSize = 32, 
    pic = new Image(), 
    map =  
    [ 
      [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:1,y:1},{x:2,y:1},{x:3,y:1},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:1,y:2},{x:2,y:2},{x:3,y:2},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3}], 
      [{x:1,y:4},{x:3,y:4},{x:2,y:3},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:3,y:4},{x:2,y:4},{x:3,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:1,y:4},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:3},{x:1,y:4},{x:1,y:4}], 
      [{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4},{x:1,y:4}] 
    ]; 
example.width = 8 * cellSize; 
example.height = 8 * cellSize; 
pic.src = 'http://habr.habrastorage.org/post_images/e85/727/cb1/e85727cb1a88099325eaf5b243d4c41f.png'; 
pic.onload = function () { 
    for (var j = 0; j < 8; j++) { 
        for (var i = 0; i < 8; i++) { 
            ctx.drawImage(pic, (map[i][j].x - 1) * cellSize, (map[i][j].y - 1) * cellSize, 32, 32, j * cellSize, i * cellSize, 32, 32); 
        } 
    } 
}

canvas { 
    border: 1px solid #ccc; 
}

<canvas id='example'></canvas>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать так, чтобы фон сужался только справа и слева?

Всем привет! Есть вот такая секция на сайтеНадо чтобы при изменении размера экрана/браузера(то есть при адаптиве), фон сужался только слева...

250

Переключение overflow-y у модального окна и body

HTML

Не рисуют изображения canvas

Как сделать так, чтобы фон сужался только справа и слева?

Переключение overflow-y у модального окна и body

Как c Unity запросить значения из Android SharedPreference?

Печать графика по времени используя Oxy Plot Windows Form