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];
    }
}

我从this Stack Overflow post中获取了大部分代码。我可以将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

您需要使用：

| id |    name | date_joined | year_joined | month_joined | day_joined |
|----|---------|-------------|-------------|--------------|------------|
|  4 |     Ken |             |        2013 |            1 |          1 |
|  5 | Lindsey |             |        2013 |            1 |          1 |
|  1 |     Bob |             |        2012 |            1 |          1 |
|  1 |     Bob |  2012-01-01 |             |              |            |
|  2 |    Jack |  2012-01-01 |             |              |            |
|  3 |    Jill |  2012-01-01 |             |              |            |

而不是

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

您的ctx.drawImage(img, (value * tileWidth * multi), 0, tileWidth * multi, tileWidth * multi);变量遭受同样的＆＃34;最后一个值＆＃34;使用闭包为img修复的问题。您可以以相同的方式在闭包中捕获i的值，但使用img更容易。

现场演示：

＆＃13;

this

＆＃13;

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

＆＃13;

#canvas{
    border: 1px solid black;
}

＆＃13;

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

Answer 2

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

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

2 个答案: