javascript - 如何创建两个变量的变量

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();
});

我正在尝试在 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

之间的索引