Проблема с drawImage canvas

266
20 мая 2018, 13:40

не появлялась картинка вызванная drawImage,но проблема решилась с помощью addEventListener("load", function() {, но как быть с множеством подобных картинок,которые после их загрузки в цикле for нормально бы появлялись?

 var canvas = document.getElementById("map"); 
map = canvas.getContext("2d"); 
var grass = new Image(); 
grass.addEventListener("load", function() { 
   map.drawImage(grass, 50, 50, 30 , 20); 
}, false); 
grass.src = '//picsum.photos/200/300';
<canvas id="map" width="200" height="100" style="border:1px solid #d3d3d3;">

Answer 1

Что-бы работать с картинками на холсте, нужно обязательно дождаться, пока браузер их загрузит. Код у вас правильный, так и надо по сути делать.

Если у вас вопрос в том, как сделать отрисовку в момент загруженности всех картинок, то самый простой способ, это посчитать кол-во картинок, которые загружаются и при загрузке каждой инкрементировать счетчик с проверкой на последнюю, что бы когда загрузилась последняя выполнить нужный код. Например так:

var canvas = document.getElementById("map"); 
var ctx = canvas.getContext("2d"); 
 
var images = []; 
var countAllImages = 4; // для динамического кол-ва картинок 
var countImagesLoaded = 0; // это наш флаг загруженности всех картинок 
 
function drawImagesAfterLoaded() { 
  if(countImagesLoaded === images.length) { 
    for(var i = 0; i < images.length; i++) { 
      ctx.drawImage(images[i], 30 * i, 20 * i, 30 , 20); 
    } 
  } 
} 
 
for(var i = 0; i < countAllImages; i++) { 
  var img = new Image(); 
  img.src = '//picsum.photos/200/' + (Math.round(Math.random() * 100 + 1)); 
  img.addEventListener("load", function() { 
    countImagesLoaded++; 
    drawImagesAfterLoaded(); 
  }, false); 
  images.push(img); 
}
<canvas id="map" width="200" height="100" style="border:1px solid #d3d3d3;">

В современном мире JS лучше бы использовать конечно Промисы (Promise)

READ ALSO
Как поменять заливку SVG по нажатию на button
javascript

Как поменять заливку SVG по нажатию на button

Написал маленький скрипт чтоб по нажатию на BUTTON менялась заливка насоса в формате SVG но почему-то не работает (( Что не так ?

 261
Асинхронный UI в AspNetCore
javascript

Асинхронный UI в AspNetCore

View:

 254
Добавление переносов в строке в JS
javascript

Добавление переносов в строке в JS

Есть JQ код, читаю содержимое textarea, и вывожу его в определенный DIVПроблема в том, что в textarea я могу написать тест с переносами строк, и даже в консоль...

 285
Кроссдоменные запросы Angular2
javascript

Кроссдоменные запросы Angular2

Как отправить кроссдоменный запрос на время тестирования приложения на Angular2Это только через сервер делается или на клиенте можно решить?

 304