Question

我想更改图像的不透明度以使其透明，并将该图像加载到画布中的另一个图像上，因为我不想使用任何其他工具来更改第一个图像的不透明度。更改画布中加载的图像的不透明度

var imgObject=new Image();
imgObject.src="myImage.jpg";
// getting context of canvas
var ctx=document.getElementById("myCanvas").getContext("2d");
// global transparency applied on canvas context..
ctx.globalAlpha=0.5;
imgObject.onload=function(){
  ctx.drawImage(imgObject,0,0);
}

是否有任何方法可以保存透明图像（画布），然后使用它将其加载到另一个图像上的新画布中。

Answer 1

我不知道如何在HTML中更改图像的不透明度，但您可以通过设置 globalALpha alALpha值来更改在canvas元素上绘制的上下文的不透明度：

var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext('2d');
var img1 = new Image();
img1.src = "img1.png";
// drawing first image on canvas..
img1.onload = function(){
   ctx1.drawImage(img1,0,0,canvas.width,canvas.height);
};
var clonedCanvas = canvas.cloneNode(true);
var ctx2 = clonedCanvas.getContext('2d');
var img2 = new Image();
ctx2.globalAlpha = 0.4;
img2.src = "img2.jpg";
img2.onload = function(){
   ctx2.drawImage(img2,0,0);
// copying clonedCanvas to myCanvas.....
   ctx1.drawImage(clonedCanvas,0,0);
};

如何使用画布更改图像的不透明度，然后将其加载到画布中的另一个图像上？-HTML

1 个答案: