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并绘制你的东西。

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

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

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

1 个答案: