canvas - drawImage()方法繪製圖片不顯示的問題

難過的想，就必須要實體嗎？不就是放到了canvas標籤前邊嘛！js載入也有實體啊，而且我還是用new的啊，比真人差哪了！

對啊，不就是放到前邊了嘛。 這就涉及到一個順序問題啊！

js里加載的圖片是放在繪圖前邊沒錯，但是圖片載入進來還需要個時間啊。需要給圖片緩衝的時間。

等圖片載入成功後才可以進行繪製。

而drawImage這個方法，當圖片在沒載入完的情況下使用，他會不被呼叫。繪製就會失敗。

原來如此！

就有人抬槓說img標籤裡的圖片不需要時間載入嗎？這時候drawImage就不受限制了？！

但是你不要忽略了，js開頭的  window.onload  的啊，就算圖片載入再慢，就算圖片標籤的順序在canvas標籤的後邊，但是我有window.onload罩著，我圖片載入不完，你drawImage就沒戲啊對不對。

大概順序是這樣的：

<img src="">
window.onload = function(){
　　drawImage
}

圖片作為一個資源請求，在js中載入時，自然也會有一個圖片載入的時間。

但是因為沒有限制，極大的情況是當圖片還沒有載入完畢就呼叫了drawImage，此方法他是不起作用的。

解決：

那有沒有好的方法 解決因圖片載入順序導致drawImage繪圖失敗的情況呢？

我總結了以下三種方法 ：

1. 標籤+window.onload

<img src="">
window.onload = function(){
　　context.drawImage()
}

這種做法解決的核心是onload，將圖片和drawImage分開載入，img先載入，確保載入完畢以後再使用繪圖

1-2. 後期插入標籤？是否可行

有一種情況是,使用截圖功能時,也可以用drawImage,而截圖又不不是截自己既有的圖片,而是用一個圖片的地址當引數.

我想這種的就需要js來建立一個img,並將地址賦給它.然後生成圖片再來截圖了

var myImg = document.createElement('img');
myImg.src = '///';
document.body.appendChild(myImg);
ctx1.drawImage(myImg,0,0,wWidth,wHeight);

不想加多餘的標籤？必要像下邊這樣用js來new一個image物件？

var bgImg = new Image();
bgImg.src = 'images/background.jpg';

前邊說了，這種 使用  new Image()  建立的圖片，需要給圖片緩衝的時間。等圖片載入成功後才可以進行繪製。

圖片物件是準備好了,但你 怎麼知道圖片什麼時候真的載入完成 呢?

好，還有辦法：

js任務執行中，你嫌我離你執行的時間太近是不，那把我單獨拎出來重新排隊，等會再執行可以否？(js單執行緒和非同步)

2. 定時器非同步實現

setTimeout(function(){
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
},10)

所以，定時器的缺點就是，不能保證時間到了以後圖片已經載入進來了，網不快的話照樣掛掉。

3. img.onload

window.onload給了我們思路,直接監聽他載入完成不可以了嘛

使用img的載入事件，監聽圖片載入 成功後，再執行canvas的繪圖效果.並且這種方法靠譜一些。

1 bgImg.onload = function(){
2console.log('圖片載入成功');
3console.log(this);
4ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
5 }

其實這三種方法都是一個核心,就是讓圖片先載入。 即圖片預載入。

但是對於快取圖片，圖片預載入還需要解決的是，當頁面不重新整理時監聽快取圖片的問題，這個問題另一篇博文。

2018-09-28  12:38:03