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