1. 程式人生 > >關於canvas無法通過drawImage載入的原因

關於canvas無法通過drawImage載入的原因

在使用drawImage方法的時候,發現無法載入

                var can = $('#mycanvas')[0];
                var cxt = can.getContext('2d');
                var bg = new Image();
                bg.src = "img/bg.jpg";
                cxt.drawImage(bg, 0, 0);

原因是圖片的載入時非同步的。在資源還沒有載入完成的時候就執行了drawImage所以無法成功載入到畫布當中。正確的寫法應該是保證圖片在onload以後才呼叫drawImage,而不是網上說的window.onload,因為我們的文件中並沒有IMG元素

    var can = $('#mycanvas')[0];
                var cxt = can.getContext('2d');
                var bg = new Image();
                bg.src = "img/bg.jpg";
                //圖片資源載入時非同步的。必須保證圖片資源載入完成後才行
                bg.onload = function() {

                    cxt.drawImage(bg, 0, 0);

                }