如何在react/next javascript中设置画布上图像的绘制顺序?[duplicate]

ql3eal8s  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(138)

此问题在此处已有答案

How do I draw images in layers on canvas?(4个答案)
3天前关闭。
示例:

var image1 = new Image();
image1.src = image1src.png;
var image2 = new Image();

var canvas = mycanvas.current;
var ctx = canvas.getContext("2d");

var image1.onload = () => {
  ctx.drawImage(image1, 0, 0);
}
var image2.onload = () => {
  ctx.drawImage(image2, 0, 0);
}

有时image2恰好先加载,并且在image1下面。我有几个图像,我需要保证绘制顺序,我该怎么办?

ldfqzlk8

ldfqzlk81#

完成第一个映像后,开始加载第二个映像

var image1.onload = () => {
   var image2.onload = () => {
     ctx.drawImage(image2, 0, 0);
   }
  ctx.drawImage(image1, 0, 0);
}

相关问题