使用Canvas和Alpha遮罩实现图像透明效果
在前端图像处理场景中，我们常常需要为图片添加不规则的透明区域，比如制作圆形头像、渐变消失效果等。传统的CSS属性只能实现矩形区域的透明度调整，无法满足复杂形状的遮罩需求。而结合Canvas的绘图能力和Alpha通道的特性，我们可以灵活实现各种自定义的图像透明效果。
核心原理
Canvas的2D上下文支持全局透明度（globalAlpha）和像素级的Alpha通道操作。Alpha遮罩的核心逻辑是：先绘制遮罩图形，设置其Alpha值控制透明程度，再将目标图像以遮罩图形的形状进行裁剪合成，最终只显示遮罩区域内的图像内容，且遮罩的透明度会同步影响图像的显示效果。
实现该效果主要依赖两个关键API：
globalCompositeOperation：设置图形之间的合成方式，这里我们使用source-in模式，即只显示新绘制内容与已有内容重叠的部分drawImage()：将图像绘制到Canvas画布上，支持指定绘制位置和尺寸
基础实现步骤
1. 准备基础环境
首先在HTML中创建Canvas元素，并获取2D绘图上下文：
<canvas id="maskCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('maskCanvas');
const ctx = canvas.getContext('2d');
</script>2. 加载目标图像
由于图像加载是异步过程，需要等待图像加载完成后再进行绘制操作，避免绘制空白内容：
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}3. 绘制Alpha遮罩与合成图像
以下示例实现圆形遮罩效果，遮罩区域为半透明圆形，最终图像只在圆形区域内显示，且透明度与遮罩一致：
async function applyAlphaMask() {
// 加载示例图像，替换为实际图像地址
const img = await loadImage('https://www.ipipp.com/sample.jpg');
// 第一步：绘制圆形遮罩，设置半透明
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; // Alpha值为0.5，半透明
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI * 2); // 绘制圆心(200,200)、半径150的圆形
ctx.fill();
// 第二步：设置合成模式为source-in，只保留后续绘制与现有内容重叠的部分
ctx.globalCompositeOperation = 'source-in';
// 第三步：绘制目标图像，图像只会在圆形遮罩区域内显示
ctx.drawImage(img, 50, 50, 300, 300); // 将图像绘制在(50,50)位置，尺寸300x300
// 恢复默认合成模式，避免影响后续操作
ctx.globalCompositeOperation = 'source-over';
}
applyAlphaMask();进阶效果：渐变Alpha遮罩
除了规则图形，我们还可以使用渐变作为遮罩，实现图像从中心到边缘逐渐透明的效果：
async function applyGradientMask() {
const img = await loadImage('https://www.ipipp.com/sample.jpg');
// 创建径向渐变作为遮罩，中心完全不透明，边缘完全透明
const gradient = ctx.createRadialGradient(200, 200, 50, 200, 200, 200);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)'); // 中心Alpha=1
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)'); // 边缘Alpha=0
// 绘制渐变遮罩
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 400);
// 设置合成模式
ctx.globalCompositeOperation = 'source-in';
// 绘制图像
ctx.drawImage(img, 0, 0, 400, 400);
// 恢复默认合成模式
ctx.globalCompositeOperation = 'source-over';
}
applyGradientMask();注意事项
如果图像来自不同域，Canvas可能会触发跨域限制，导致无法读取像素数据。此时需要为图像设置
crossOrigin属性为anonymous，且服务器需要允许跨域访问。合成模式
source-in会完全替换之前的绘制内容，如果需要保留遮罩外的背景，可以先绘制背景再执行遮罩操作。高分辨率屏幕下Canvas可能会出现模糊问题，可以通过设置Canvas的
width和height为显示尺寸的两倍，再通过CSS缩小显示来优化清晰度。
应用场景
这种Alpha遮罩技术可以广泛应用于以下场景：
用户头像裁剪，生成圆形、圆角矩形等形状的头像
图片转场动画，通过动态改变遮罩的Alpha值实现渐变消失效果
UI组件中的图像装饰，比如不规则形状的商品展示图
游戏开发中的角色遮罩、地图区域高亮等效果