Проблема с drawImage canvas

222

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)

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

Все вопросы

ТОП-10

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

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

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

218

javascript

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

View:

222

javascript

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

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

184

javascript

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

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

260