從JavaScript上的圖片創建畫布

Question

我正在嘗試學習在javascript中操作圖像和畫布。 我想知道為什么我們不能做：

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
         var can = document.getElementById('canvas');
         var ctx = can.getContext('2d');
         var img = new Image();
         img.onload = function(){

         }
         img.src =urlimg ;
         can.width = img.width;
         can.height = img.height;
         ctx.drawImage(img, 0, 0, img.width, img.height);
         $('#image1').attr('src', img.src);

我們必須這樣做：

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
         var can = document.getElementById('canvas');
         var ctx = can.getContext('2d');
         var img = new Image();
         img.onload = function(){
             can.width = img.width;
             can.height = img.height;
             ctx.drawImage(img, 0, 0, img.width, img.height);
         }
         img.src =urlimg ;
         $('#image1').attr('src', img.src);

是由於圖像加載時間引起的嗎？

我可以從現有的對象圖像創建畫布嗎？

謝謝。

Answer 1

是由於圖像加載時間引起的嗎？

_____部分，但主要是因為圖像加載是異步的代碼的下一行就當圖像被加載執行。 讓您知道事件完成時引發的事件。

我可以從現有的對象圖像創建畫布嗎？

否（不是直接），但是您可以將圖像繪制到畫布上以對其進行初始化（就像您已經做的那樣）：

ctx.drawImage(imageElement, 0, 0, width, height);