Javascript 如果你只有图像链接，如何将图像绘制到画布上？

在Javascript中，只有在具有图像链接的情况下，才可以最好地将图像绘制到画布，如下所示：http://www.mydomain.com/folder/car.png?

---

注意：如果您想知道，该链接将位于同一个域上。

实例化一个图像，设置url，然后调用context.drawImageparams

您只需要定义一个js图像对象，并使用drawImage

 var d_canvas = document.getElementById('canvas');
 var context = d_canvas.getContext('2d');
 var ballon = new Image();
 ballon.src = "http://i.imgur.com/6l6v2.png";
 context.drawImage(ballon, 100, 1)

---

下面是一个具有多个链接的示例，循环中有一个警报，用于显示每个链接的值

var can = document.getElementById('pictures');
var ctx = can.getContext('2d');
var img = ['http://placekitten.com/200/300','http://placekitten.com/100/100','http://placekitten.com/125/125','http://placekitten.com/50/50','http://placekitten.com/150/300'];
for(var i = 0; i <= img.length - 1; i ++){
    var cat = new Image();
    cat.src = img[i];
    ctx.drawImage(cat, 50, 50);
    alert('drew ' + cat.src);
}

---

抓取链接的href，将其输入img的.src，并将img图像绘制到画布上。但在我的情况下，有2000个链接，这真的是唯一的方法吗？@omega将链接放入一个数组中，并对每个链接进行迭代…我无法想象其他任何事情，但这里的人很聪明，所以我们将看到。。。另外，2000张图片如何才能放在一张画布上？我不知道有什么方法可以避免得到2000张图片为什么是2000张？你能质疑这一假设，并找到一种方法来减少开支吗？e、 jqueryui的图标将大约180个图像粘贴到一个图标上，但是一旦你拥有了所有的图标，假设它们很小，你就可以将它们的ToDataURL缓存到本地存储中。如果画布是静态的，您可以将整个画布缓存到localStorage中。你仍然可以得到图像，但至少只能得到一次。如果我在做一个for循环，每次迭代都会得到一个新的链接，我可以重用相同的图像对象吗？就像每次我更改src一样，onload函数会启动吗？或者如果我为每个对象创建一个新的图像对象会更快吗？如果我在做一个for循环，每次迭代都会得到一个新的链接，我可以重用相同的图像对象吗？就像每次我更改src一样，onload函数会启动吗？或者，如果我为每个图像对象创建一个新的图像对象，它会更快吗？你可以重复使用相同的图像对象，我更新了小提琴。检查它。如果速度是个问题，你可能希望在一个图像中有一个包含所有2000个图像的精灵表。您可以使用额外的参数调用drawImage以这种方式使用它。它不“需要”它，不。如果你点击run，你会看到提供的小提琴工作正常。如果使用onload，则无法对所有文件使用一个js图像对象。我没有任何证据表明使用一个对象会更快，但很可能是这样，omega要求这样做。那么onload事件呢？你不需要在图像加载后才绘制它吗？