Javascript-在画布上平铺多个图像

Question

我只是试图并排加载3个不同的图像，但是当我运行以下代码时，它只会绘制我多次推送到src[]的最后一个图像。

function draw(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var tileWidth = 25;
    var tileWCount = 3;
    var multi = 2;
    var src = [];
    src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg");
    src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg");
    src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg");

    for(var i=0; i < tileWCount; i++){
        var img = new Image();
        img.onload = (function(value){
            return function() {
                ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);
            }
        })(i);
        img.src = src[i];
    }
}

我从这个Stack Overflow帖子中获取了很大一部分代码。 我可以将src设置为单个图像，但是当我尝试使用迭代器时，它将开始失败。 我确实注意到那里的答案是将ctx.drawImage与src[value]一起使用，但我无法用它来绘制任何东西。

我完全不知道为什么会这样。

为了方便起见，我建立了一个jsfiddle项目： http : //jsfiddle.net/fierstarter/jv0ko966/

 function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var tileWidth = 25; var tileWCount = 3; var multi = 2; var imgA = []; var src = []; src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg"); src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg"); src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg"); for(var i=0; i < tileWCount; i++){ var img = new Image(); img.onload = (function(value){ return function() { ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi); } })(i); img.src = src[i]; } } draw(); 

 #canvas{ border: 1px solid black; } 

 <canvas id="canvas" width="320" height="240"></canvas> 

Answer 1

您将需要使用：

ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);

代替

ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);

您的img变量也遇到了使用闭包为i解决的“最后一个值”问题。 您可以以相同的方式在闭包中捕获img的值，但仅使用this更容易。

工作现场演示：

 function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var tileWidth = 25; var tileWCount = 3; var multi = 2; var imgA = []; var src = []; src.push("http://st.hzcdn.com/simgs/6361d7eb0dee6b28_4-1763/contemporary-tile.jpg"); src.push("http://www.in.all.biz/img/in/catalog/middle/205131.jpeg"); src.push("http://www.magnet-textures.com/textures/2011/7/715-1259-1-blue-tiles-ico-big.jpg"); for(var i=0; i < tileWCount; i++){ var img = new Image(); img.onload = (function(value){ return function() { ctx.drawImage(this, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi); } })(i); img.src = src[i]; } } draw(); 

 #canvas{ border: 1px solid black; } 

 <canvas id="canvas" width="320" height="240"></canvas> 

JSFiddle版本： http ： //jsfiddle.net/jv0ko966/2/

Answer 2

在for循环中使用src.length而不是采用静态定义的变量（tileCount）。 我试过了，它的工作原理。