在画布上，我首先在一个自运行函数中绘制矩形0,0,canvas.width,canvas。高度作为画布的背景，我将globalAlpha设置为1 .然后我在自己的函数中绘制其他形状，并将其globalAlpha设置为0。无论数字是多少，它们都不会相互影响。

这个建议是基于canvas 2d上下文中的像素操作。

中数:

您可以在字节级别上直接操作画布中的像素数据

为了操作像素，我们将在这里使用两个函数——getImageData和putImageData。

getImageData usage:

var myImageData = context.getImageData(left, top, width, height);

putImageData语法:

context.putImageData(myImageData, x, y); 

context是你的canvas 2d context, x和y是在画布上的位置。

为了得到红色、绿色、蓝色和alpha值，我们将执行以下操作:

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

其中x是水平偏移量，y是垂直偏移量。

使图像半透明的代码:

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

你可以制作你自己的“着色器”-在这里看到完整的MDN文章

我认为这最好地回答了问题，它实际上改变了已经画出来的东西的alpha值。也许当这个问题被问到时，这不是api的一部分。

给定2d context c。

function reduceAlpha(x, y, w, h, dA) {
    let screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
        screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}

你可以。透明画布可以通过使用目标输出全局合成操作快速褪色。它不是100%完美的，有时它会留下一些痕迹，但它可以调整，取决于什么需要(即使用'source-over'，用alpha为0.13的白色填充它，然后褪色以准备画布)。

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

在画布上，我首先在一个自运行函数中绘制矩形0,0,canvas.width,canvas。高度作为画布的背景，我将globalAlpha设置为1 .然后我在自己的函数中绘制其他形状，并将其globalAlpha设置为0。无论数字是多少，它们都不会相互影响。

我也在寻找这个问题的答案，(澄清，我想能够绘制一个图像与用户定义的不透明度，如如何绘制形状与不透明度)，如果你绘制原始形状，你可以设置填充和笔画颜色与alpha来定义透明度。就我目前得出的结论而言，这似乎并不影响图像绘制。

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

我已经得出结论，设置globalCompositeOperation与图像工作。

//works with images
ctx.globalCompositeOperation = "lighter";

我想知道是否有某种第三种设置颜色的方法，这样我们就可以轻松地为图像着色并使其透明。

编辑:

经过进一步的挖掘，我得出的结论是，你可以在绘制图像之前通过设置globalAlpha参数来设置图像的透明度:

//works with images
ctx.globalAlpha = 0.5

如果你想在一段时间内实现渐隐效果你需要某种循环来改变alpha值，这很简单，实现它的一种方法是setTimeout函数，查找它来创建一个循环来改变alpha值。