Question

我通过我的图片循环并尝试将所有内容放在我的画布中，但是我收到了这个错误：

我的Html：

<div class="container-fluid">

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

</div>

signatures.js：121 Uncaught TypeError：无法执行'drawImage' 'CanvasRenderingContext2D'：提供的值不是类型 '（CSSImageValue或HTMLImageElement或SVGImageElement或 HTMLVideoElement或HTMLCanvasElement或ImageBitmap或 OffscreenCanvas）” 在Image.images。（匿名函数）.onload（http://localhost/app/public/js/signatures.js:121:25）

我的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());

Answer 1

你有问题：

因为var只是一个let，它被提升到函数的顶部，并且在调用回调时它的值将不正确，而不是u变量。

用于设置水平偏移的let变量会遇到同样的问题。

如果您的JS环境不支持images[i].onload = (function(i, u) { context.drawImage(images[i], u, 0, itemWidth, itemHeight); }).bind(this, i, u);，您可以使用此代码：

^([0][1-9]|[1-2][0-9]|[3][0-7])([a-zA-Z]{5}[0-9]{4}[a-zA-Z]{1}[1-9a-zA-Z]{1}[zZ]{1}[0-9a-zA-Z]{1})+$

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

1 个答案: