Javascript 画布绘制错误

当我尝试将图像绘制到画布元素时，我得到以下示例：

未捕获错误：索引大小错误：DOM异常1
textureLoadedstaticsprite.js:14
staticsprittestaticsprite.js:21
（匿名函数）

所有CanvasRenderingContent和HTMLImageElement都存在。 我只是不明白：S

以下是我正在使用的代码：

    /**
  * Class for drawing static sprites, like trees and blocks
  */

function StaticSprite(args) {

    // Private Fields
    var texture = new Image();

    // Events
    function textureLoaded(context) {
        console.log(context);
        console.log(texture);
        context.drawImage(texture, 0, 0, 32, 32);

    }

    // Constructor

    // Add event listeners
    texture.addEventListener("load", textureLoaded(this.graphics), false);

    // Load texture
    texture.src = "img/assets/wall1.png";

    if(args != undefined) {

        // Set local fields
        this.x = args.x || this.x;
        this.y = args.y || this.y;
        this.z = args.z || this.z;
        this.width = args.width || this.width;
        this.height = args.height || this.height;

    }

    this.width = 32;
    this.height = 32;

}

// Inherit from GraphicsEntity
StaticSprite.prototype = new GraphicsEntity();

这是GraphicsEntity基类，以备需要：p

/**
  * Class for presentation of graphical objects.
  */

function GraphicsEntity(args) {

    // Private Fields
    var x = 0; // The X-position of the GraphicsEntity relative to it's parent container
    var y = 0; // The Y-position of the GraphicsEntity relative to it's parent container
    var z = 0; // The Z-position of the GraphicsEntity relative to it's parent container
    var width = 0; // The width of the GraphicsEntity
    var height = 0; // The height of the GraphicsEntity

    // Public Fields
    this.DOMElement = null; // Reference to the corresponding HTML Element
    this.graphics = null; // The 2D context for rendering 2D onto the element.
    this.name = ""; // The name of the GraphicsEntity

    // Properties
    // The Alpha or transparency value of the GraphicsEntity, 1 is completely opaque, 0 is completely transparent.
    Object.defineProperty(this, "alpha", {

        get: function() { return parseFloat(this.DOMElement.style.opacity); },
        set: function(value) { this.DOMElement.style.opacity = value; }

    });

    // The height of the GraphicsEntity
    Object.defineProperty(this, "height", {

        get: function() { return height; },
        set: function(value) {

            height = value; // Set internal width
            this.DOMElement.setAttribute("height", height); // Set DOMElement width

        }

    });

    // The width of the GraphicsEntity
    Object.defineProperty(this, "width", {

        get: function() { return width; },
        set: function(value) {

            width = value; // Set internal width
            this.DOMElement.setAttribute("width", width); // Set DOMElement width

        }

    });

     // The X-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "x", {

        get: function() { return x; },
        set: function(value) {

            x = value; // Set internal X-axis
            this.DOMElement.style.left = Math.ceil(x) + "px"; // Set DOMElement X-axis

        }

    });

    // The Y-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "y", {

        get: function() { return y; },
        set: function(value) {

            y = value; // Set internal Y-axis
            this.DOMElement.style.top = Math.ceil(y) + "px"; // Set DOMElement Y-axis

        }

    });

    // The Z-position of the GraphicsEntity relative to it's parent container
    Object.defineProperty(this, "z", {

        get: function() { return z; },
        set: function(value) { this.DOMElement.style.zIndex = parseInt(value); }

    });

    // Constructor

    // Get constructor values of use default
    if(args) {

        x = args.x || x;
        y = args.y || y;
        z = args.z || z;
        width = args.width || width;
        height = args.height || height;

    }

    // Create a new canvas element
    this.DOMElement = document.createElement('canvas');

    // Set postion
    this.DOMElement.style.position = "absolute"; // Positioning style
    this.DOMElement.style.left = x + "px"; // X-axis
    this.DOMElement.style.top = y + "px";  // Y-axis
    this.DOMElement.style.zIndex = z; // Z-Axis
    this.DOMElement.width = width;
    this.DOMElement.height = height;

    // Set opacity/alpha
    this.DOMElement.style.opacity = 1;

    // Get 2d canvas context
    this.graphics = this.DOMElement.getContext('2d');

}

此行尝试将

textureLoaded（This.graphics）

返回的函数添加为事件侦听器。该函数返回未定义的值，因此无法正常工作

试着把那行改成

texture.addEventListener("load", textureLoaded, false);

更换线路

    function textureLoaded(context) {

用台词

    var context = this.graphics;
    function textureLoaded() {

此行尝试将

textureLoaded（This.graphics）

返回的函数添加为事件侦听器。该函数返回未定义的值，因此无法正常工作

试着把那行改成

texture.addEventListener("load", textureLoaded, false);

更换线路

    function textureLoaded(context) {

用台词

    var context = this.graphics;
    function textureLoaded() {

---

你能给我们看看html吗？您何时以及如何称呼“textureLoaded”？如果在drawimage中设置参数，则使用或调用的参数或默认参数在哪里？您到底在哪里调用canvas元素？设置2d上下文等？我没有正确查看你的代码，尽管它看起来像你的

纹理。addEventListener

行是错误的。您在那里调用函数，而不是将其作为处理程序发送。你可以试着用咖喱或装订。在您当前的版本中，发送的处理程序是未定义的，因为这是函数的返回值。您能给我们看一下html吗？您何时以及如何称呼“textureLoaded”？如果在drawimage中设置参数，则使用或调用的参数或默认参数在哪里？您到底在哪里调用canvas元素？设置2d上下文等？我没有正确查看你的代码，尽管它看起来像你的

纹理。addEventListener

行是错误的。您在那里调用函数，而不是将其作为处理程序发送。你可以试着用咖喱或装订。在当前版本中，发送的处理程序是未定义的，因为这是函数的返回值。是的，这会回答它。我想我会在画完后销毁上下文变量。非常感谢！是的，这就是答案。我想我会在画完后销毁上下文变量。非常感谢！