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 に答える