Chrome 31.0 HTML5畫布繪製圖像

由於下載當前版本的Chrome（版本31.0.1650.57），我已經完全無法使用我的代碼在HTML5畫布中繪製圖像;沒有錯誤，它找到資源，他們只是沒有繪畫。我非常感謝這方面的幫助！Chrome 31.0 HTML5畫布繪製圖像

var grass_img = new Image(); 
grass_img.src = 'grass.gif'; 
grass_img.onload = draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1);

其中在這裏和那裏出現在多個不同的圖像，並呼籲：

function draw_here(image, x, y, scale){ 
    draw_canv.drawImage(image, x, y, image.width * scale, image.height * scale); 
}

X和Y是正確的，是規模;調試器沒有發現編碼錯誤，並且程序完美工作，直到最新版本的Chrome出現。降級鉻也不是一種選擇。

來源

2013-11-26 Gargleyark

31有相當一些繪畫問題，它似乎。我不知道是否有其他的事情要做，而不是等待...... – GameAlchemist

啊哈是一個已知的錯誤？那麼我不需要驚慌太多。無論如何，我會繼續尋找簡單的修復方法 – Gargleyark

OOps既然你說'它工作的很完美'我只是忽略了，但@Philipp的答案肯定是正確的。這是關於在使用它們之前等待資源加載的老問題。 – GameAlchemist

我解決了這個問題。看起來，如果您在每個幀迭代中聲明圖像，Chrome的最新版本並不喜歡它。（以前似乎允許的東西，但我真的不應該這樣做）。如果你在js的頂部聲明你的圖像和它們的源，而不是任何函數，並且只有在函數中繪製它們，那麼問題解決了，例如：

var image = new Image(); 
image.src='image.jpg'; 

someFunction() { 
    canvas.drawImage(image,0,0); 
}

來源

2013-11-28 11:51:31 Gargleyark

的問題是在這條線：

grass_img.onload = draw_here(/* ... */);

你似乎認爲你分配的功能draw_here作爲一個onload處理程序。但這不是這一行真正發生的事情。你真正做的是立即執行draw_here，並將該函數的返回值（undefined）指定爲grass_img.onload。

試試這個：

grass_img.onload = function() { 
    draw_here(grass_img, (center_x + base_x + xpos), (center_y + base_y + ypos),1); 
}

這將創建一個匿名函數被分配到onload事件處理程序。當這個匿名函數被調用（當load-event被觸發時會發生），它會用你的參數調用你的draw-handler。

來源

2013-11-26 14:52:17 Philipp

這仍然沒有排序的圖像沒有出現的問題 - 它絕對是改進了代碼，但它沒有解決這個問題，只出現在新版本的鉻 – Gargleyark

@Gargleyark你可以嘗試提供[SSCCE] （http://sscce.org/）jsfiddle並打開一個新的問題？ – Philipp

-1

注：.src應該總是被稱爲後.onload。否則會出現許多難以追蹤的車（如此類）。特別是如果您的圖像加載之前加載可以解析。由於競爭狀態和功能開銷時間的關係，您當前接受的解決方案可能功能正常。

來源

2014-03-07 05:00:34 Isius

Chrome 31.0 HTML5畫布繪製圖像

回答

相關問題