阻止全局合成操作影响某些图像

问题描述

我有以下画布脚本，该脚本应该绘制两次相同的图像。但是，底部的图像用一种颜色“填充”，而顶部的图像则不受影响（因此，图像具有清晰的纯色投影）：

window.onload = function canvasCall() {
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
          var caraimg = document.getElementById("imgtest");
          var shadow = document.getElementById("shadow"); // a 1x1 image colored pink

          ctx.drawImage(caraimg,0); // image I don't want affected

          ctx.drawImage(caraimg,50,0); // bottom image
          ctx.globalCompositeOperation = 'source-in';
          ctx.drawImage(shadow,caraimg.width,caraimg.height); // shadow to clip into the image
          };

但是globalCompositeOperation会使两个图像都变成粉红色。我尝试将底部放入自己的函数中，但没有显示出来。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html5-canvas javascript