HTML5 Canvas 繪制圖片不顯示的問題

問題：

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

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

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

1. canvas標簽+id

    <div >
        <canvas id="myCanvas2" width="700" height="400" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>
    </div>

 

2. getContext('2d')准備畫布

            var c2 = document.getElementById("myCanvas2");
            var cxt2 = c2.getContext("2d");

3. new一個Image()對象,並付給他的屬性

            var img = new Image();
            img.src = "canvasTest1.jpg";

4. 終於到了繪圖。興沖沖的寫下這段代碼：

cxt2.drawImage(img,30,20,640,360);

流着哈喇子，我在瀏覽器按下了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繪圖失敗的情況呢？

我總結了以下三種方法：

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任務執行中，你嫌我離你執行的時間太近是不，那把我單獨拎出來重新排隊，等會再執行可以否？

2. 定時器異步實現

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

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

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

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

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

3. img.onload

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

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

            img.onload = function() {
                console.log("圖片加載完成！");
                cxt2.drawImage(img,30,20,640,360);
            }

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