Chrome canvas渲染問題

Question

我創建了一個小型JavaScript遊戲，並在所有主流瀏覽器的本地計算機上進行了測試，並且工作正常。之後，我上傳了我的託管服務器上的遊戲，並且遊戲不會在Chrome中顯示，畫布區域是灰色的，但在Firefox中它工作正常，任何人都知道爲什麼？這裏是鏈接的演示

http://djordjepetrovic.rs/igrica/

Answer 1

在你catcher_game.js文件，我發現至少在這：

draw: function(){ 
    basket_catcherImg = new Image(); 
    basket_catcherImg.src = 'images/basket.png'; 
    ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h); 
// ... 

這將不能很好地工作。它在您的計算機上在本地工作，因爲圖像是從磁盤緩存的。

加載圖像是一個異步操作，以便您的drawImage需要等到加載圖像 - 正確的方法是：

draw: function(){ 
    var me = this; 
    basket_catcherImg = document.createElement('img'); 
    basket_catcherImg.onload = function() { 
     ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h); 
    } 
    basket_catcherImg.src = 'images/basket.png'; 
    //... 

你需要與IMG的其他這樣的情況下做到這一點。

你需要me這裏的原因是因爲this更改爲號召的onload回調時的圖像元素。因此，您需要保留對原始this上下文的引用。

同時將new Image()更換爲createElement('img')，因爲目前有an issue in Chrome不能正確處理此問題。

好的圖形的方式！