从javascript上的图像创建画布

我正在尝试学习用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);

是否由于加载图像的时间

我可以从现有对象图像创建画布吗

谢谢

是否由于加载图像的时间

部分是的，但主要是因为图像加载是异步的，所以在加载图像时，下一行代码会立即执行。让您知道事件在完成时引发

我可以从现有对象图像创建画布吗

否（不是直接），但您可以将图像绘制到画布上进行初始化（正如您已经做的那样）：

---

图像在设置src属性后异步加载。感谢您的帮助。像这样创建的图像之间有什么区别吗：var=image（）；在jquery中，$（'#image1'），其中'image1'是imgé元素的id：@McbJam，如果您的意思是

var el=new Image（）

，或者在任何情况下，如果您使用

document.getelementbyid（）

，它们将返回元素本身，而jquery的$将返回一个jquery对象，这是一种包装集。有关更多信息，请参见此处：

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