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

Canvas apply different image patterns for differents drawings in a canvas?

本文关键字：图像 模式 应用 图形 布中      更新时间：2023-09-26

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

由于使用了相同的变量（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

相关文章：