如何动态地使用画布叠加画布？

-1

我有一个画布动态写入没有身份证分配给它。我怎样才能通过JS叠加第一个画布上的图像（多画布中）？如何动态地使用画布叠加画布？

<canvas width="240" height="297"> 

<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>

来源

2017-08-29 Viru

为了获得DOM使用普通的JavaScript可以使用好老功能document.getElementsByTagName()的1日画布。然后做你想要的。

也许它会更安全地匹配其他属性 - 比如类名 - 只是为了避免出现错误的画布（jQuery选择器会很好）。

BTW以下应该工作

<html> <head> <script> var image = new Image(); image.onload = function(){//react on image download completed //you can get the 1st canvas of the DOM accessing the array of canvas var canvas = document.getElementsByTagName("canvas")[0]; //then draw on it as needed var context = canvas.getContext('2d'); context.drawImage(image, 0, 0); }; //load image image.src = "http://i.imgur.com/ITWfejd.png"; </script> </head> <body> <canvas width="240" height="297"></canvas> <canvas id = "image_to_Overlay" width = "800" height = "500"></canvas> </body> </html>

来源

2017-08-29 15:54:00

谢谢。我没有看到画布上的图像。 var image = new Image（）; image.src =“https://i.imgur.com/ITWfejd.png”; //你可以获得访问画布数组的DOM的第一个画布 var canvas = document.getElementsByTagName（“canvas”）[0]; //然后根据需要绘制它 var context = canvas.getContext（'2d'）; context.drawImage（image，1000,1000）; – Viru

这是因为'image.src ='...''立即返回：图像下载是异步的。如果你提前调用它，那么你必须等待图像可用，即使用事件监听器，比如'image.onload = ...' 这真的取决于你的逻辑。查看https://stackoverflow.com/questions/2691301/async-or-sync-when-we-set-the-src-property-of-the-image-object –

我已经用完整的html文档扩展了这个例子和'onload'功能。再次，您可以根据您的具体需求在需要的地方移动它。请记住， 1）在附加onload事件监听器函数后，必须设置图像src 2）当时画布应该可用。 –

如何动态地使用画布叠加画布？

回答

相关问题