画布为画布中的不同绘图应用不同的图像模式？

Question

我有 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';
    }
}

Answer 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