js怎么给图片加遮罩

JS给图片加遮罩的方法有很多，包括使用CSS、Canvas、SVG等方式。常用的方法包括：使用CSS的伪元素、Canvas绘图、SVG遮罩等。以下将详细介绍如何使用这些方法给图片加遮罩。

一、使用CSS的伪元素

使用CSS的伪元素可能是最简单的方式之一。通过在图片的父元素上应用伪元素并设置其样式，可以实现多种遮罩效果。

1. 使用伪元素和透明度

我们可以通过设置一个伪元素如::before或::after，并调整其透明度来实现遮罩效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Mask with CSS</title>
    <style>
        .image-wrapper {
            position: relative;
            display: inline-block;
        }
        .image-wrapper::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
        }
    </style>
</head>
<body>
    <div class="image-wrapper">
        <img src="your-image.jpg" alt="Example Image">
    </div>
</body>
</html>

2. 使用渐变遮罩

通过CSS渐变，可以创建更多复杂的遮罩效果。

.image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0)); /* 渐变遮罩 */
}

二、使用Canvas绘图

Canvas API提供了丰富的绘图功能，可以用来创建复杂的遮罩效果。

1. 基本的Canvas遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Mask with Canvas</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'your-image.jpg';
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; // 半透明黑色遮罩
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>

2. 使用Canvas的复杂遮罩

Canvas还可以用来创建更复杂的遮罩效果，如圆形遮罩、渐变遮罩等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex Mask with Canvas</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'your-image.jpg';
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 创建圆形遮罩
            ctx.globalCompositeOperation = 'destination-in';
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 4, 0, Math.PI * 2);
            ctx.closePath();
            ctx.fill();
        }
    </script>
</body>
</html>

三、使用SVG遮罩

SVG也提供了丰富的遮罩功能，可以与HTML结合使用。

1. 基本的SVG遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Mask with SVG</title>
</head>
<body>
    <svg width="0" height="0">
        <defs>
            <mask id="mask" x="0" y="0" width="1" height="1">
                <rect x="0" y="0" width="100%" height="100%" fill="white"/>
                <circle cx="50%" cy="50%" r="40%" fill="black"/>
            </mask>
        </defs>
    </svg>
    <img src="your-image.jpg" style="mask: url(#mask); -webkit-mask: url(#mask);" alt="Example Image">
</body>
</html>

2. 使用复杂的SVG遮罩

SVG可以创建复杂的遮罩效果，如渐变遮罩、图形遮罩等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complex Mask with SVG</title>
</head>
<body>
    <svg width="0" height="0">
        <defs>
            <mask id="mask" x="0" y="0" width="1" height="1">
                <linearGradient id="grad">
                    <stop offset="0%" stop-color="white" />
                    <stop offset="100%" stop-color="black" />
                </linearGradient>
                <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)"/>
            </mask>
        </defs>
    </svg>
    <img src="your-image.jpg" style="mask: url(#mask); -webkit-mask: url(#mask);" alt="Example Image">
</body>
</html>

四、结合JavaScript和CSS

有时我们需要通过JavaScript动态地调整遮罩效果，这时可以结合JavaScript和CSS来实现。

1. 动态调整遮罩透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Mask with JavaScript and CSS</title>
    <style>
        .image-wrapper {
            position: relative;
            display: inline-block;
        }
        .image-wrapper::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 初始半透明黑色遮罩 */
            transition: background 0.3s;
        }
    </style>
</head>
<body>
    <div class="image-wrapper">
        <img src="your-image.jpg" alt="Example Image">
    </div>
    <button id="toggle-mask">Toggle Mask</button>
    <script>
        const button = document.getElementById('toggle-mask');
        const wrapper = document.querySelector('.image-wrapper');
        button.addEventListener('click', () => {
            const mask = wrapper.querySelector('::before');
            const currentOpacity = parseFloat(getComputedStyle(mask).backgroundColor.split(',')[3]);
            if (currentOpacity === 0.5) {
                mask.style.background = 'rgba(0, 0, 0, 0.8)'; // 增加遮罩透明度
            } else {
                mask.style.background = 'rgba(0, 0, 0, 0.5)'; // 恢复初始遮罩透明度
            }
        });
    </script>
</body>
</html>

2. 动态调整Canvas遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Canvas Mask with JavaScript</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button id="toggle-mask">Toggle Mask</button>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = 'your-image.jpg';
        img.onload = function() {
            drawImageWithMask(0.5); // 初始遮罩透明度
        }
        const button = document.getElementById('toggle-mask');
        button.addEventListener('click', () => {
            const currentOpacity = parseFloat(button.dataset.opacity);
            const newOpacity = currentOpacity === 0.5 ? 0.8 : 0.5;
            button.dataset.opacity = newOpacity;
            drawImageWithMask(newOpacity);
        });
        function drawImageWithMask(opacity) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>

总结：通过CSS伪元素、Canvas绘图、SVG和JavaScript结合CSS，我们可以实现各种图片遮罩效果。每种方法都有其独特的优势，选择合适的方法可以根据具体需求和项目特点来决定。对于需要复杂绘图和动态效果的项目，Canvas和JavaScript结合是一个不错的选择；而对于简单的遮罩效果，CSS伪元素则更加简便高效。