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

canvas有個很強大的api是drawImage()（w3c）：

他的主要功能就是繪製圖片、視頻，甚至其他畫布等。

慕名趕來,卻一腳踩空,低頭一看,地上一個大坑。

事情是這樣的,在我看完w3c的介紹和很有說服力和教學力的demo後,本著實踐出真知的思想決定上手一試,這一試不要緊~

我依照流水線工程鋪設以下幾點基本工作:

1. canvas標籤+id

 <canvas id=canvas1></canvas>

2. 取得canvas+設定寬高

 var cav1 = document.getElementById('canvas1'), wWidth = 800, wHeight = 600; cav1.width = wWidth; cav1.height = wHeight;

3. getContext('2d')準備畫布

 var ctx1 = cav1.getContext('2d');

4. new一個Image()物件,並付給他我喜歡...的圖片(別想多了)的屬性

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

5. 終於到了繪圖。興沖沖的寫下這段程式碼：

 ctx1.drawImage(bgImg,0,0,wWidth,wHeight);

流著哈喇子，我在瀏覽器按下了F5。

然後一片死寂...

我以為程式碼寫錯了，回去仔細檢查一遍，沒錯。

複製w3c的關鍵屬性名稱及方法再檢查一遍，確實沒錯。

圖片印出來，也有這個（人）圖啊！

後來觀察w3c的案例，和我程式碼的差別就是他的圖片是在html裡邊的。

然後我就學著向html裡邊插入了圖片，

 <img src=./images/background.jpg id=imgs style=display:none></img>

並且用getElementById來取得這個元素，

 var bgImg = document.getElementById('imgs')

再次執行繪圖竟然可以了。

他竟然可以了！

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

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

js裡載入的圖片是放在繪圖前邊沒錯，但圖片載入進來還需要個時間啊。需要給圖片緩衝的時間。等圖片載入成功後才可以進行繪製。而drawImage這個方法，當圖片在沒載入完的情況下使用，他會不被呼叫。繪製就會失敗。原來如此！

就有人抬槓說img標籤裡的圖片不需要時間載入嗎？這時候drawImage就不受限制了？ ！但你不要忽略了，js開頭的window.onload 的啊，就算圖片加載再慢，就算圖片標籤的順序在canvas標籤的後邊，但是我有window.onload罩著，我圖片加載不完，你drawImage就沒戲啊對不對。

大概順序是這樣的：

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

如果不是在html結構中插入的圖片，就被我的粗心繞過了這個限制:

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

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

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

我總結了以下三種方法：

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

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

有一種情況是,使用截圖功能時,也可以用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任務執行中，你嫌我離你執行的時間太近是不，那把我單獨拎出來重新排隊，等會再執行可以否？

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

這裡為什麼延遲寫了10，沒寫大家熟悉的1000或0呢？

因為在我的特定wifi環境特定桌上型電腦的測試下，10能在圖片加載完後剛好圖片出來，而不像0那樣不出來，也不想1000那樣等半天出來。

可是試想一下，換一個更大的圖，這個10還適用嗎？ wifi換成2g這個10還適用嗎?

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

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

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

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

其實這三種方法都是一個核心,就是讓圖片先載入。即圖片預先載入。但是對於快取圖片，圖片預先載入還需要解決的是，當頁面不刷新時監聽快取圖片的問題。

又發現一個問題。 。 。 。首先，背景圖畫完的樣子長這樣。

然後好不容易背景圖畫出來了，我就開開心心的繼續吧。

於是我緊接著畫了一條紅線，為了避免看不到，我還把寬度增加到了20：

 bgImg.onload = function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight); } /* 繪製紅線如下： */ ctx1.beginPath(); ctx1.moveTo(10,wHeight); ctx1.Toline (10,wHeight-100); ctx1.lineWidth = 20; ctx1.strokeStyle = 'red'; ctx1.stroke(); ctx1.closePath();

但我F5按下依舊沒有變化，還是看不到紅線。

找了半天到我把背景圖關掉才看到：

啊，原來他被背景圖蓋住囉！

可是，為什麼呢？

我在想有兩種可能

1、層級問題

2.先後問題

關於1，就像css的z-index那種感覺，是背景圖在上蓋住了紅線。難道說背景圖的層級比紅線高？

這個設想我沒辦法測試，於是放棄進行第二種可能的揭秘。

可是為什麼背景圖會在上呢？是因為背景圖後畫？

這個可以最簡單的透過console.log()列印觀察執行順序

原來罪魁禍首竟然是onload這個回調。他跟定時器一樣，都是非同步任務。自然排在了同步任務（下邊的繪製線）的後邊

所以前邊看似是一個很好的解決方法-onload，在這裡也揭露了他的弊端。

很好、看來，promise學習大計宜趁早提上行程啊！哈哈哈

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。