TonyStark1337
@TonyStark1337

Почему canvas не принимает динамические src?

Почему canvas не принимает динамические src, есть такой код

var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 contextT = canvas.getContext("2d");
      var img = new Image();
      var imgflag_1 = new Image();
	  var imgflag_2 = new Image();
	  var imgflag_3 = new Image();
	  var imgflag_4 = new Image();
	  var imgUSER = new Image();
      var loaded = 0;
      img.src = "img/testimage.png";

	  var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL; 
	  console.log("link   "+testingURL); // тут выводится как надо, но фото не отображается на холсте 
          
	  imgflag_2.src = "minCountry/American.png";
	  imgflag_3.src = "minCountry/American.png";
	  imgflag_4.src = "minCountry/American.png";
	  imgUSER.src = "img-user.jpg";
      imgflag_1.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_2.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_3.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	        imgflag_4.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
	  imgUSER.onload = function(){
      	if(++loaded == 2)
        	draw();
      }
      img.onload = function() {
      	if(++loaded == 2)
        	draw();
      };
      
      function draw(){
              
        context.drawImage(img, 0, 0);  
		context.drawImage(imgflag_1, 515, 162,110,110);
		context.drawImage(imgflag_2, 515, 275,110,110);
		context.drawImage(imgflag_3, 515, 385,110,110);
		context.drawImage(imgflag_4, 515, 500,110,110);
		context.drawImage(imgUSER, 15, 160,400,400);
}


Если сделать так то работает
imgflag_1.src = "minCountry/American.png";
Если так то не работает, проверял через console.log значение пишется нормально в переменную, массив тоже виден
var testingURL = "minCountry/"+arr[a[0]]+".png";
           imgflag_1.src = testingURL;

Иногда если перезагрузить страницу много раз срабатывает нормально
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 2
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
А где определение массива arr и что такое a?
Ответ написан
twobomb
@twobomb
Когда-то чёто писал
function loadResources(arr,func){//функция загрузки внешних ресурсов(картинок) arr - массив ссылок, func - функция которая вызовется после загрузки всех ресурсов
  var loadStatus = false;
    loadStatus = {count: arr.length, loaded: 0, percent: 0};//count - общее количество ресурсов, loaded - сколько загружено ресурсов, percent сколько загружено в процентах
    for(var i = 0; i < arr.length; i++){
      var tmp = new Image();
      tmp.src = arr[i];
      tmp.onload = function(){
        loadStatus.loaded++;
        loadStatus.percent = (loadStatus.loaded * 100)/loadStatus.count;
        if(loadStatus.loaded >= loadStatus.count)
          func();
      }	
     }
  return loadStatus;  
 }

Пример
loadResources(["/img/1.jpg","/img/2.jpg"],draw)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Giox Москва
от 120 000 ₽
GXB Development Йошкар-Ола
от 100 000 до 160 000 ₽
Miro Пермь
от 130 000 ₽
07 июн. 2020, в 12:47
2500 руб./за проект
07 июн. 2020, в 11:29
2500 руб./за проект