Javascript在循环中的画布上创建图像

我正在循环浏览我的图像，并尝试将所有图像都放在画布中，但我遇到以下错误：

我的Html：

<div class="container-fluid">

    <canvas id="signature-canvas" class="signature-canvas"></canvas>

</div>

signatures.js:121未捕获类型错误：无法在上执行“drawImage” “CanvasRenderingContext2D”：提供的值不是类型 '（CSSImageValue或HTMLImageElement或SVGImageElement或 HTMLVideoElement或HTMLCanvasElement或图像位图或 OffscreenCanvas）' at Image.images.（匿名函数）.onload（）

我的javascript

var canvasModule = {

    elements: {
        canvas: document.getElementById('signature-canvas')
    },

    render: function () {
        this.createImageOnCanvas();
    },

    getCanvasContext: function () {
        return this.elements.canvas.getContext('2d');
    },

    getCanvasWidth: function () {
        return this.elements.canvas.width;
    },

    getCanvasHeight: function () {
        return this.elements.canvas.height;
    },

    createImageOnCanvas: function () {

        var itemWidth = this.getCanvasWidth() / 7;
        var itemHeight = this.getCanvasHeight() / 3;

        var u = 0;
        var context = this.getCanvasContext();
        var images = [];
        var imagesWidth = [];
        var imagesHeight = [];

        for (var i = 1; i < 8; i++) {
            images[i] = new Image();

            images[i].src = 'images/sample/1'+i+'.png';

            imagesWidth[i] = images[i].width;
            imagesHeight[i] = images[i].height;

            images[i].onload = function () {
                context.drawImage(images[i], u, 0, itemWidth, itemHeight);
            }

            u = u + itemWidth;
        }

    }

}


$(document).ready(canvasModule.render());

var canvasModule={
要素：{
canvas:document.getElementById（'signature-canvas'）
},
渲染：函数（）{
这是createImageOnCanvas（）；
},
getCanvasContext:函数（）{
返回this.elements.canvas.getContext（'2d'）；
},
getCanvasWidth:函数（）{
返回this.elements.canvas.width；
},
getCanvasHeight:函数（）{
返回this.elements.canvas.height；
},
createImageOnCanvas:函数（）{
var itemWidth=this.getCanvasWidth（）/7；
var itemHeight=this.getCanvasHeight（）/3；
var u=0；
var context=this.getCanvasContext（）；
var图像=[]；
var imagesWidth=[]；
var imagesHeight=[]；
对于（变量i=1；i<8；i++）{
图像[i]=新图像（）；
images[i].src='images/sample/1'+i+'.png'；
imagesWidth[i]=图像[i]。宽度；
ImageSheHigh[i]=图像[i]。高度；
图像[i]。onload=函数（）{
drawImage（图像[i]，u，0，itemWidth，itemHeight）；
}
u=u+itemWidth；
}
}
}
$（document）.ready（canvasModule.render（））；

您在这里遇到了一个问题：

 images[i].onload = function () {           
     context.drawImage(images[i], u, 0, itemWidth, itemHeight);
 }

因为

i

只是一个提升到函数顶部的

var

，调用回调时其值将不正确，而不是

let

变量

用于设置水平偏移的

u

变量也遇到同样的问题

如果您的JS环境不支持

let

，您可以改用它：

images[i].onload = (function(i, u) {
     context.drawImage(images[i], u, 0, itemWidth, itemHeight);
}).bind(this, i, u);

---

我让你的脚本在图像没有使用数组定义的情况下工作，也许onload没有使用数组正常工作？第29行：函数this.getCanvasContext（）不存在，我用这个.getCanvas（）替换了它。@JoostMeijer函数确实存在，所以你的脚本现在可以工作了？哦，你说得对，我不小心删除了复制到我的编辑器的部分。但是脚本是可以工作的，看看codepen.io.Rule of thumb：永远不要在循环中创建函数。这是一个典型的变量提升案例。在您的情况下，

var i

被挂起用于回调。最好使用

这个
@kaido你什么意思？
.bind
调用已经保留了
这个
。好吧，这已经起作用了，但是所有图像现在都堆叠起来，而不是彼此相邻。你知道如何解决这个问题吗？@Jaan你有没有使用我更新的答案，在我将
u
传递到回调中的地方？@Alnitak是的，我使用了这个答案，但它不会增加？