滤镜 - 蘇阿細

滤镜

suaxi

2025-08-13 / 0 评论 / 3 阅读 / 正在检测是否收录...

08/13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滤镜</title>
</head>
<body>
    <script>
        // 1.创建 canvas 画布
        const canvas = document.createElement('canvas')
        // 设置宽高
        canvas.width = 500
        canvas.height = 500
        document.body.append(canvas)

        // 2.获取 context 对象（画笔）
        const context = canvas.getContext('2d')

        // 滤镜
        // context.filter = 'none' // 默认值
        // context.filter = 'blur(5px)' // 模糊
        // context.filter = 'brightness(70%)' // 亮度
        // context.filter = 'contrast(25%)' // 对比度
        // context.filter = 'grayscale(60%)' // 灰度
        // context.filter = 'hue-rotate(100deg)' // 色彩旋转
        // context.filter = 'invert(60%)' // 透明度
        // context.filter = 'opacity(60%)' // 反相
        // context.filter = 'saturate(300%)' // 饱和度
        context.filter = 'sepia(300%)' // 褐度

        const img = new Image()
        img.src = './images/test.jpg'
        img.onload = function() {
            context.drawImage(img, 100, 100)
        }
    </script>
</body>
</html>

1.模糊.png