js图片遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Masking Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        const img = new Image();
        img.src = 'path/to/your/image.jpg';
        img.onload = () => {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            // 创建圆形遮罩
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 150, 0, Math.PI * 2);
            ctx.clip();

            // 再次绘制图像，应用遮罩效果
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
    </script>
</body>
</html>