如何在图像上绘制图像？

在Javascript中，只有在链接到图像时才能将图像绘制到画布上，如下所示：http://www.mydomain.com/folder/car.png？如何在图像上绘制图像？

注意：链接将在您想知道的同一个域上。

来源

2013-07-10 omega

抢链接href，将其提供给一个IMG的的.src和的drawImage（）的IMG到画布 – dandavis

但在我的情况下，那里有2000个链接，这真的是唯一的出路？ – omega

@omega把链接放在一个数组中，并迭代每一个... – brbcoding

实例化Image（），设置url并调用context.drawImage（params）。

http://www.html5canvastutorials.com/tutorials/html5-canvas-images/

来源

2013-07-10 18:15:36 Seano666

辉煌的研究 – dandavis

如果我正在做一个for循环，每次迭代获得一个新的链接，我可以重复使用相同的图像对象吗？就像每次更改src一样，onload函数是否会触发？或者如果我为每一个创建一个新的图像对象，它会更快？ – omega

http://jsfiddle.net/dYupU/

你只需要定义一个js Image对象，并使用的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)

来源

2013-07-10 18:19:07

您可以重复使用相同的图像对象，我更新了小提琴检查出来 –

如果速度是一个问题，您可能想要查看一张图像中的所有2000张图像的精灵图。您可以使用额外的参数调用drawImage以这种方式使用它。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D –

这里是通过多条链路的例子，内循环警报告诉你每个链接的价值

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

DEMO

来源

2013-07-10 18:25:27 brbcoding

onload事件怎么样？只有在图像加载后才需要绘制它？ – omega

如何在图像上绘制图像？

回答

相关问题