Javascript HTML画布无法绘制图像

鉴于以下两个对象：

function newDoodle() {
  var Doodle = {
    /* Variables for creating the canvases */
    cnvWdth: 800, 
    cnvHght: 250,
    bgCanvas: false,
    fgCanvas: false,
    bgContext: false,
    fgContext: false,
    bodyElement: false,

    /* Variables for future objects */
    background: false,

    init: function(bodyElement) {
      /* Set up the two canvas elements */
      this.bodyElement = bodyElement;
      this.bgCanvas = this.createCanvas('background');
      this.fgCanvas = this.createCanvas('foreground');
      this.bgContext = this.getContext(this.bgCanvas);
      this.fgContext = this.getContext(this.fgCanvas);

      /* Set up the background canvas */
      this.bgImage = newBackground();
      this.bgImage.init(this.bgContext);
    },

    createCanvas: function(id) {
      var canvas = $('<canvas />').appendTo(this.bodyElement);
      canvas.attr('width', this.cnvWdth);
      canvas.attr('height', this.cnvHght);

      return canvas[0];
    },

    getContext: function(canvas) {
      var context = canvas.getContext('2d');
      return context;
    }
  }
  return Doodle;
}

function newBackground() {
  var Background = {
    /* Background Image source variables */
    srcXPos: 0,
    srcYPos: 0,
    srcWdth: 800,
    srcHght: 250,

    bgImage: new Image(),
    bgImageSrc: 'doodle_background.png',
    context: false,

    init: function(ctx) {
      this.context = ctx;
      this.bgImage.addEventListener('load', this.drawBackground(), false);
      this.bgImage.src = this.bgImageSrc;
    },

    drawBackground: function() {
      this.context.drawImage(this.bgImage, 0, 0);
    }
  }
  return Background;
}

函数newDoodle（）{ var Doodle={ /*用于创建画布的变量*/ cnvWdth:800， cnvHght:250， BG:错， 答:错,， 背景：错误， 背景：错， bodyElement:false， /*未来对象的变量*/ 背景：错， init：函数（bodyElement）{ /*设置两个画布元素*/ this.bodyElement=bodyElement； this.bgCanvas=this.createCanvas（'background'）； this.fgCanvas=this.createCanvas（'前景'）； this.bgContext=this.getContext（this.bgCanvas）； this.fgContext=this.getContext（this.fgCanvas）； /*设置背景画布*/ this.bgImage=newBackground（）； this.bgImage.init（this.bgContext）； }, createCanvas:函数（id）{ var canvas=$（''）.appendTo（this.bodyElement）； canvas.attr（'width'，this.cnvWdth）； canvas.attr（'height'，this.cnvHght）； 返回画布[0]； }, getContext:函数（画布）{ var context=canvas.getContext（'2d'）； 返回上下文； } } 返回涂鸦； } 函数newBackground（）{ 变量背景={ /*背景图像源变量*/ srcXPos:0， srcYPos:0， srcWdth:800， srcHght:250， bgImage:新映像（）， bgImageSrc:'doodle_background.png'， 上下文：错， 初始化：函数（ctx）{ this.context=ctx； this.bgImage.addEventListener（'load'，this.trackground（），false）； this.bgImage.src=this.bgImageSrc； }, 缺点：功能（）{ this.context.drawImage（this.bgImage，0,0）； } } 返回背景； }

---

我将

newDoodle（）

返回的对象存储到一个变量中，并调用其

init

函数。最终，它将调用

newBackground（）

对象的

trackground（）

函数。我已经验证了图像和上下文都是有效的，即使使用

“use strict”

，控制台中也没有报告任何内容，但画布上也没有任何内容。我遗漏了什么？

这一行是罪魁祸首：

this.bgImage.addEventListener('load', this.drawBackground(), false);

看看你是如何在这里调用this.trackground，而不是将其作为事件处理程序传递的

您可能想要的是：

var that = this;
this.bgImage.addEventListener('load',
    function () { that.drawBackground(); }, false);

请注意，不能缩短为

this.bgImage.addEventListener('load',
    this.drawBackground, false); // will not work!

---

因为

trackground

需要上下文–该

上下文，而不是画布上下文。嗯，那也是。无论如何，我离题了：）
这句话是罪魁祸首：

this.bgImage.addEventListener('load', this.drawBackground(), false);

看看你是如何在这里调用this.trackground，而不是将其作为事件处理程序传递的

您可能想要的是：

var that = this;
this.bgImage.addEventListener('load',
    function () { that.drawBackground(); }, false);

请注意，不能缩短为

this.bgImage.addEventListener('load',
    this.drawBackground, false); // will not work!

因为
trackground
需要上下文–该
上下文，而不是画布上下文。嗯，那也是。无论如何，我离题了：）
非常感谢！非常感谢你！非常感谢！非常感谢你！