使用HTML Canvas和JavaScript实现图像透明度遮罩
在前端开发中，我们经常需要对图像进行各种视觉效果的处理，图像透明度遮罩就是其中非常实用的一种。通过透明度遮罩，我们可以实现图像渐变显示、局部高亮、动态过渡等效果，而HTML Canvas结合JavaScript能够轻松实现这类需求，无需依赖第三方图像编辑工具。
核心原理
Canvas的2D上下文提供了丰富的图像操作方法，实现透明度遮罩的核心思路是：先绘制原始图像，再绘制一个遮罩层，通过调整遮罩层的透明度或者利用合成操作（globalCompositeOperation），让原始图像按照遮罩的规则显示。常见的实现方式有两种：一是使用半透明的纯色遮罩层叠加，二是使用带有透明通道的遮罩图像与原始图像合成。
基础实现：纯色半透明遮罩
这种方式适合实现全局或区域性的统一透明度调整，比如让图像整体变半透明，或者给图像添加一层淡色滤镜。
1. 准备HTML结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas图像透明度遮罩示例</title> </head> <body> <canvas id="maskCanvas" width="800" height="500"></canvas> <script src="mask.js"></script> </body> </html>
2. 编写JavaScript逻辑
// 获取Canvas元素和2D上下文
const canvas = document.getElementById('maskCanvas');
const ctx = canvas.getContext('2d');
// 创建图像对象
const img = new Image();
// 加载示例图像，替换为指定示例网址
img.src = 'https://www.ipipp.com/sample-image.jpg';
// 图像加载完成后执行绘制
img.onload = function() {
// 绘制原始图像，铺满整个Canvas
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 设置遮罩层颜色为黑色，透明度0.3，可根据需求调整
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
// 绘制遮罩层，覆盖整个Canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);
};上述代码中，我们先加载一张图像并绘制到Canvas上，接着通过fillStyle设置了一个半透明的黑色填充，再用fillRect绘制覆盖整个Canvas的矩形，最终图像就会呈现出整体变暗、半透明的效果。如果需要调整透明度，只需要修改rgba中的第四个参数（取值范围0-1，0为完全透明，1为完全不透明）即可。
进阶实现：渐变透明度遮罩
如果我们需要实现图像从透明到不透明的渐变效果，比如图像左侧完全透明、右侧完全清晰，就可以使用Canvas的渐变功能来创建遮罩层。
const canvas = document.getElementById('maskCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://www.ipipp.com/sample-image.jpg';
img.onload = function() {
// 绘制原始图像
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 创建线性渐变，从左到右
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// 渐变起点：完全透明
gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
// 渐变终点：完全不透明
gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
// 设置遮罩层为渐变
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};这里我们使用了createLinearGradient创建线性渐变，通过addColorStop定义渐变节点的透明度和颜色，最终绘制出来的遮罩层会让图像呈现从左到右逐渐清晰的渐变效果。如果需要垂直渐变或者其他方向的渐变，只需要调整createLinearGradient的参数即可。
高级实现：自定义遮罩图像合成
当我们需要更复杂的遮罩效果，比如按照特定形状的遮罩图像来显示原始图像时，就需要用到Canvas的合成操作globalCompositeOperation。这种方式需要一个原始的待处理图像和一个作为遮罩的图像（遮罩图像的透明通道会决定原始图像的显示区域）。
const canvas = document.getElementById('maskCanvas');
const ctx = canvas.getContext('2d');
// 原始图像
const sourceImg = new Image();
sourceImg.src = 'https://www.ipipp.com/source-image.jpg';
// 遮罩图像，需要带有透明通道
const maskImg = new Image();
maskImg.src = 'https://www.ipipp.com/mask-image.png';
// 等待两张图像都加载完成
let loadedCount = 0;
const totalImg = 2;
function checkAllLoaded() {
loadedCount++;
if (loadedCount === totalImg) {
drawMask();
}
}
sourceImg.onload = checkAllLoaded;
maskImg.onload = checkAllLoaded;
function drawMask() {
// 先绘制遮罩图像
ctx.drawImage(maskImg, 0, 0, canvas.width, canvas.height);
// 设置合成操作为source-in：新绘制的内容只会在已有内容的不透明区域显示
ctx.globalCompositeOperation = 'source-in';
// 绘制原始图像，此时原始图像只会显示在遮罩图像的不透明区域
ctx.drawImage(sourceImg, 0, 0, canvas.width, canvas.height);
// 恢复默认合成操作，避免影响后续绘制
ctx.globalCompositeOperation = 'source-over';
}这里的globalCompositeOperation设置为source-in后，后续绘制的内容只会保留与已有内容（遮罩图像）不透明区域重叠的部分，透明区域的内容会被丢弃，从而实现按照遮罩图像形状显示原始图像的效果。Canvas还提供了多种合成操作，比如destination-in、source-out等，可以根据实际需求选择。
注意事项
图像加载是异步过程，一定要在
onload回调中执行绘制操作，否则可能出现图像未加载完成导致绘制空白的问题。如果遮罩图像和原始图像尺寸不一致，需要通过
drawImage的参数调整绘制尺寸，避免拉伸或显示不全。合成操作会影响后续所有的绘制行为，使用完成后记得重置为默认的
source-over。Canvas的绘制操作无法修改原始图像文件，所有效果都是绘制在Canvas画布上的，如果需要保存结果，可以通过
canvas.toDataURL()方法导出为图像数据。
总结
通过HTML Canvas和JavaScript实现图像透明度遮罩，我们可以灵活实现从简单的半透明效果到复杂的自定义形状遮罩的各种需求，整个过程在前端完成，无需后端处理，响应速度快且适配性好。掌握Canvas的图像绘制和合成操作，能够为前端界面带来更丰富的视觉体验。
Canvas图像处理透明度遮罩JavaScript图像合成Canvas渐变globalCompositeOperation