图片不显示在画布上

我正在试验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/

来源

2012-01-02 PeeHaa

画布组的宽度和高度是多少？画布元素是DOM树的一部分吗？请创建一个http://jsfiddle.net/演示。 – 2012-01-02 00:15:45

@FelixKling使用CSS：'width：100％;'，'height：300px;'。 – PeeHaa 2012-01-02 00:17:40

CSS不会帮助，你必须设置'width'和'height'属性/属性。请参阅https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage *编辑*我刚刚读到，画布的默认大小是'300px x 150px'，所以这不应该成为问题。 – 2012-01-02 00:18:21

pos_x和pos_y在您的代码中为undefined。

draw.grass(0, 0);

DEMO

测试在Chrome和Firefox：如果你通过数值为他们draw.grass()它的工作原理。

来源

2012-01-02 00:43:30

我还是看不到它？！？ http://imageshack.us/photo/my-images/402/whereisit.png/使用你的演示。 – PeeHaa 2012-01-02 00:47:35

给它一秒，图像必须加载。他的演示确实有效。 – 2012-01-02 00:48:43

@MattGreer它不是一个加载的问题我相信这一点。让我试试另一个浏览器。 – PeeHaa 2012-01-02 00:49:52

这可能是因为你需要一个上下文借鉴。

尝试：

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的范围。

来源

2012-01-02 00:19:11 PlexQ

与上下文的良好通话。但是'canvas'将在'this.draw'内部可用，因为这个函数是一个闭包。 – 2012-01-02 00:21:54

你可能会正确使用'this.canvas'。修正了那一个。但仍然没有运气。关于：“这可能是因为你需要一个上下文来绘制。”。这是在这个Canvas对象中。我已更新我的问题以反映这一点。 – PeeHaa 2012-01-02 00:23:58

@MattG：在代码更新之前，PlexQ回答了此问题。现在这个答案已经过时了。 – 2012-01-02 00:46:39

图片不显示在画布上

回答

相关问题