как сделать переменную из двух переменных

Question

Перед вашим читать это мой первый счет был заблокирован, так как я спросил плохие вопросы .. Так что, пожалуйста, не голосовать отрицательный, но сказать, что я делаю неправильно

ооочень У меня есть этот скрипт:

var img1 = new Image() 
img1.src="image1.jpg" 
var img2 = new Image() 
img2.src="image2.jpg" 
var img3 = new Image() 
img3.src="image3.jpg" 

function Canvas() { 
    var ctx = document.getElementById('slider').getContext('2d'); 
    var pic=1 

    function slider() { 
     this.draw = function() { 
      if(pic<4){pic++} 
      else{ 
       pic=1 
      } 
      var img = "img"+pic 
      ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height) 
     } 
    } 

    var slider = new slider(); 

    function draw() { 
     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
     ctx.save(); 
     //draw 

     slider.draw(); 

     //draw 
     ctx.restore(); 
    } 

    var animateInterval = setInterval(draw,100) 
} 

window.addEventListener('load', function(event) { 
Canvas(); 
}); 

Я пытаюсь нарисовать изображение 1 или 2 или 3 на своем холсте. Но у меня также есть var pic, у которого есть номер. Поэтому я попробовал ctx.drawimage(img+pic,0,0) или var img = "img"+pic и нарисовал его тогда. Но это не работает для меня.

Я надеюсь, что вы примете мой вопрос и может ответить на него, Thnx

Answer 1

использовать массив вместо

var img = []; 

/* you should use a for loop here */ 
for (var i = 0; i < 3; i++) { 
    img[i] = new Image(); 
    img[i].src = "image" + (i+1) ".jpg"; 
} 

, а затем вы ссылаетесь правильное изображение с img[pic]. Обязательно используйте индекс между 0 и img.length - 1

Answer 2

Не используйте отдельные переменные, используйте массив.

var images = [ new Image(), new Image(), new Image() ]; 
for (var i = 0; i < images.length; i++) { 
    images[i].src = "image" + (i+1) + ".jpg"; 
} 

Затем обратитесь к массиву в функции Slider():

var pic = 0; 
function slider() { 
    this.draw = function() { 
     pic = (pic + 1) % images.length; 
     var img = images[pic]; 
     ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height) 
    } 
} 

Answer 3

ошибка, кажется, что вы обратитесь к строке «Img1», а не объект img1. Попробуйте использовать массив. Укажите следующее:

... 
var pic=0; 
var img=[img1,img2,img3]; 

function slider() { 
    this.draw = function() { 
     if(pic<3){pic++} 
     else{ 
      pic=0; 
     } 
     ctx.drawImage(img[pic],0,0,ctx.canvas.width,ctx.canvas.height) 
    } 
} 
...