1

我有 4 张图片要在画布上显示。我有4张图纸。每个绘图的每个图像。但是当我运行循环时，它会为所有绘图应用最后一个图像。

我如何将不同的图像图案应用于不同的图纸？

谢谢你。

function draw(){
    var ctx = $('#canvas')[0].getContext('2d');

    var $width = $('#canvas').parent().width();
    var $canvas_width = 380;
    var $canvas_margin = 20;
    var $canvas_height = 810;

    var $total_draw = $width / Math.ceil($canvas_width);
    var $start = 0;

    for(var i = 1; i <= $total_draw + 1; i++){
        var image = new Image();
        image.onload = function(){
            ctx.save();
            ctx.beginPath();
            ctx.moveTo($start,0);
            ctx.lineTo($start + $canvas_width,0);
            ctx.lineTo($start, $canvas_height);
            ctx.lineTo(-380 + $start, $canvas_height);
            ctx.lineTo($start,0);
            ctx.fillStyle = ctx.createPattern(image, "no-repeat");
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            $start = $start + ($canvas_width + $canvas_margin);
        };

        image.src = 'img/samples/b'+i+'.jpg';
    }
}
4

1 回答 1

1

由于您使用相同的变量 ( image )，因此 image.src 每次都会更改，直到您到达最后一次迭代。

该循环在加载任何图像之前运行他的 4 个循环，然后加载最后一个图像并调用 image.onload 并绘制你的东西。

要解决此问题，请将所有内容放在for循环之外并使用不同的变量名称。或者你可能会做这样的事情：

var imgArray = new Array();
for (var i=1; i<=4; i++)
{
    imgArray[i] = new Image();
    imgArray[i].src = 'img/samples/b' + i + '.jpg';
    imgArray[i].onload = function(){
            ctx.save();
            ctx.beginPath();
            ctx.moveTo($start,0);
            ctx.lineTo($start + $canvas_width,0);
            ctx.lineTo($start, $canvas_height);
            ctx.lineTo(-380 + $start, $canvas_height);
            ctx.lineTo($start,0);
            ctx.fillStyle = ctx.createPattern(image, "no-repeat");
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            $start = $start + ($canvas_width + $canvas_margin);
        };
}

所以onload函数适用于不同的对象。

更新

希望您对该代码感到满意 :) 抱歉，我没有找到更好的带有序列号的图像。

http://jsfiddle.net/r5QAF/2/只需将此代码与您的代码合并，您可能会得到您想要的东西

这里有一些关于你面临的问题的阅读（循环中的javascript闭包）http://www.mennovanslooten.nl/blog/post/62

于 2013-02-22T15:09:44.557 回答