Javascript 图像不'；我不会出现在画布上

我正在试验

canvas

元素，但由于某些原因，它不显示我的图像

我使用以下代码：

function Canvas() {
  this.field = function() {
    var battlefield = document.getElementById('battlefield');
    var canvas = battlefield.getElementsByTagName('canvas')[0];

    return canvas.getContext('2d');
  }
}

function Draw(canvas) {
  if (!canvas) {
    alert('There is no canvas available (yet)!');
    return false;
  }

  this.canvas = canvas;

  this.grass = function(pos_x, pos_y) {
    var terrain = new Terrain();
    var specs = terrain.grass();

    var img = new Image();
    img.onload = function(){
      canvas.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);
      console.log('success???'); // this is being output
    };
    img.src = '/img/terrain.png';
  }
}

(function() {
  var canvas = new Canvas();
  var draw = new Draw(canvas.field());
  draw.grass();
})();

没有错误，但图像无法显示。我已经验证了图像是否存在，它确实存在。我还验证了

规范

，它们确实包含了它们应该包含的内容：

dimension_x: 25
dimension_y: 25
position_x: 0
position_y: 0

知道我做错了什么吗

---

这可能是因为您需要一个上下文来进行绘制

尝试：

然后在上下文对象而不是画布对象上调用绘图函数：

this.context.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);

---

您对

canvas

的引用似乎也是错误的，应该是

this.canvas

（或

this.context

）而不仅仅是canvas，至少我在javascript中理解范围是这样的。

这可能是因为您需要一个上下文来进行绘制

尝试：

然后在上下文对象而不是画布对象上调用绘图函数：

this.context.drawImage(img, specs.position_x, specs.position_y, specs.dimension_x, specs.dimension_y, pos_x, pos_y, specs.dimension_x, specs.dimension_y);

---

您对

canvas

的引用似乎也是错误的，应该是

this。canvas

（或

this.context

）不仅仅是canvas，至少我在javascript中理解是这样。

pos_x

和

pos_y

在您的代码中是

未定义的。如果您将它们的值传递给
draw.grass（）
，则该方法有效：


在Chrome和Firefox中测试。
pos\u x
和
pos\u y
在您的代码中未定义。如果您将它们的值传递给
draw.grass（）
，则该方法有效：


在Chrome和Firefox中进行测试。
画布集的
宽度和
高度是多少？画布元素是DOM树的一部分吗？请创建一个演示。@FelixKling使用CSS:
width:100%，
高度：300px
.CSS没有帮助，您必须设置
宽度
和
高度
属性/属性。请参见编辑我刚读到画布的默认大小是
300px 150px
，因此这不应该是一个问题。可能是img/terrain.png而不是/img/terrain.png？虽然您的代码仍然不完整，但不确定这是否真的重要。您是否将
pos\u x
和
pos\u y
传递到
draw.grass
？我真的建议您创建一个演示。画布的
宽度和
高度是否设置？画布元素是DOM树的一部分吗？请创建一个演示。@FelixKling使用CSS:
width:100%，
高度：300px
.CSS没有帮助，您必须设置
宽度
和
高度
属性/属性。请参见编辑我刚读到画布的默认大小是
300px 150px
，因此这不应该是一个问题。可能是img/terrain.png而不是/img/terrain.png？虽然您的代码仍然不完整，但不确定这是否真的重要。您是否将
pos\u x
和
pos\u y
传递到
draw.grass
？我真的建议你创建一个演示。很好的上下文调用。但是
canvas
将在
this.draw中可用，因为此函数是一个闭包。您使用
this.canvas
可能是正确的。修正了那个。但还是没有运气。关于：
这可能是因为您需要一个上下文来利用。
。它位于this.canvas对象中。我已经更新了我的问题以反映这一点。@MattG:PlexQ在代码更新之前回答了这个问题。现在这个答案已经过时了。@FelixKling:是的，我意识到了这一点，所以我删除了我的评论。也许我也能学到一些东西，但我认为canvas变量是在对象的范围内给出的，this.grass是一个成员函数，onload函数，而闭包只会从成员函数中获取上下文，而不是对象，因此，您仍然必须使用this.canvas（或this.context）？这是一个很好的上下文调用。但是
canvas
将在
this.draw中可用，因为此函数是一个闭包。您使用
this.canvas
可能是正确的。修正了那个。但还是没有运气。关于：
这可能是因为您需要一个上下文来利用。
。它位于this.canvas对象中。我已经更新了我的问题以反映这一点。@MattG:PlexQ在代码更新之前回答了这个问题。现在这个答案已经过时了。@FelixKling:是的，我意识到了这一点，所以我删除了我的评论。也许我也能学到一些东西，但我认为canvas变量是在对象的范围内给出的，this.grass是一个成员函数，onload函数，而闭包只会从成员函数中获取上下文，而不是对象，因此，您仍然必须使用this.canvas（或this.context）？我仍然没有看到它？！？使用你的演示。@MattGreer我确信这不是加载的问题。让我试试另一个浏览器。@PeeHaa:我的代码中有一个
调试器
，也许这阻止了它的执行？这对我来说很好：@FelixKling谢谢你的帮助，并指出了显而易见的问题！：P现在开始工作了。看起来铬金丝雀是罪魁祸首。适合我在不稳定的浏览器中使用：（啊..对pos_x和pos_y的理解很好。我非常习惯于在无法调用这样的函数的语言中工作，或者在我实际调试之前，我的IDE会提醒我错误！我仍然看不到它？！使用你的演示。@MattGreer我确信这不是加载的问题。让我试试其他浏览器。@PeeHaa:我有一个
调试程序r
在代码中，也许这阻止了它的执行？它对我来说很好：@FelixKling感谢你的帮助并指出了显而易见的问题！：P它现在正在工作。看起来Chrome canary是罪魁祸首。适合我在不稳定的浏览器中使用：（啊..对pos_x和pos_y的理解很好。我已经习惯了在不能调用那样的函数的语言中工作，或者在我实际调试它之前，我的IDE会提醒我错误！
draw.grass(0, 0);