2

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

是因为加载图像的时间吗？

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

谢谢。

4

1 回答 1

1

是因为加载图像的时间吗？

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

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

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

ctx.drawImage(imageElement, 0, 0, width, height);
于 2013-05-19T21:48:08.590 回答