如何在画布上所有其他内容后面绘制图像？

Question

我有一个画布，我想用它drawImage在画布上当前内容后面绘制图像。

由于画布上已经有内容（我正在使用字面上的画布来创建包含图像的画布，因此我无法首先真正绘制图像），因此drawImage在渲染其余内容之前我无法使用。

是否可以将drawImage画布上的所有其他内容放在后面？

Answer 1

是的，您可以只使用globalCompositeOperation destination-over，但请注意，您的第一个图像需要一定的透明度，否则，您显然不会看到任何内容：

var img1 = new Image();
var img2 = new Image();

var loaded = 0;
var imageLoad = function(){
   if(++loaded == 2){
     draw();
     }
   };
img1.onload = img2.onload = imageLoad;

var draw = function(){
  var ctx = c.getContext('2d');
  ctx.drawImage(img1, 100,100);
  // wait a little bit before drawing the background image
  setTimeout(function(){
    ctx.globalCompositeOperation = 'destination-over';
    ctx.drawImage(img2, 0,0);
    }, 500);
  }
img1.src = "https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png";
img2.src = "https://picsum.photos/200/200";

<canvas id="c" width="200" height="200"></canvas>

Answer 2

抱歉，之前的帖子，我没有正确阅读您的帖子

也许您可以保存画布，绘制图像，然后在绘制的图像上重新加载旧内容？这是一些 JS 伪代码：

var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
ctx.drawImage('Your Image Watermark Stuff');
ctx.putImageData(imgData,0,0);