圖片不顯示在畫布上

我正在試驗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

圖片不顯示在畫布上

回答

相關問題