Question

我正在尝试使用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();
})();

没有错误，但图像不显示。我已经验证了图像是否存在而且确实存在。我还验证了specs，它们确实包含了应有的内容：

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

知道我做错了吗？

http://jsfiddle.net/uwkfD/3/

Answer 1

代码中的

pos_x和pos_y为undefined。如果您将值传递给draw.grass()：

，它就有效

draw.grass(0, 0);

DEMO

在Chrome和Firefox中测试过。

Answer 2

这可能是因为你需要一个上下文来绘制。

尝试：

this.context = canvas.getContext('2d')

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

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），而不仅仅是画布，至少我理解javascript中的范围。

图像不会显示在画布上

2 个答案: