从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);