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)
    }
}
...

如何制作两个变量的变量

3 个答案: