canvas 효과

색 변경

    <canvas class="canvas" width="300" height="360"></canvas>
    <script>
        const canvas = document.querySelector(".canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.src = "./images/g.jpg";

        let original, len;

        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            original = ctx.getImageData(0, 0, 300, 360);
            len = original.data.length / 4;
        };

        canvas.addEventListener('mouseenter',()=>{
            const copy = ctx.getImageData(0, 0, 300, 360);
            for (let i = 0; i < len; i++) copy.data[i * 4 + 2] = 255;
            ctx.putImageData(copy, 0, 0); 
        })

        canvas.addEventListener('mouseleave',()=>{
            ctx.putImageData(original, 0, 0);
        })
    </script>

천천히 색 변경

    <canvas class="canvas" width="300" height="360"></canvas>
    <script>
        const canvas = document.querySelector(".canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.src = "./images/g.jpg";

        let original, len;
        let progress = 0;
        let target = 0;

        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            original = ctx.getImageData(0, 0, 300, 360);
            len = original.data.length / 4;
            render();
        };

        function render() {
            progress += (target - progress) * 0.02;
            const copy = ctx.getImageData(0, 0, 300, 360);
            for (let i = 0; i < len; i++){
                // const r = original.data[i * 4 + 0]
                // const b = original.data[i * 4 + 2]
                // const g = original.data[i * 4 + 1]
                // const a = original.data[i * 4 + 3]

                // rgba 중 b 
                const b = original.data[i * 4 + 2]
                copy.data[i * 4 + 2] = b + (255 - b) * progress; 
            }
            ctx.putImageData(copy, 0, 0);
            requestAnimationFrame(render);
        }

        canvas.addEventListener('mouseenter', () => {
            target = 1;
        })

        canvas.addEventListener('mouseleave', () => {
            target = 0;
        })
    </script>

노이즈 효과

    <canvas class="canvas" width="300" height="360"></canvas>
    <script>
        const canvas = document.querySelector(".canvas");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        img.src = "./images/g.jpg";

        let original, len;
        let target = 0;  
        let progress = 0;
        let jitterAmount = 500;  // 노이즈 효과의 크기

        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            original = ctx.getImageData(0, 0, 300, 360);
            len = original.data.length / 4;
            render();
        };

        function render() {
            progress += (target - progress) * 0.02;

            const copy = ctx.getImageData(0, 0, 300, 360);
            
            for (let i = 0; i < len; i++) {
                const r = original.data[i * 4 + 0];
                const g = original.data[i * 4 + 1];
                const b = original.data[i * 4 + 2];

                // -250에서 +250 범위로 랜덤하게 이동
                const jitterAmount = 500;
                const jitter = Math.random() * jitterAmount - (jitterAmount / 2);
                 // -25 ~ 25 범위로 색상에 노이즈 추가
                const noise = Math.random() * 50 - 25;  

                // 색상 변화
                copy.data[i * 4 + 0] = r + noise * progress; 
                copy.data[i * 4 + 1] = g + noise * progress;
                copy.data[i * 4 + 2] = b + noise * progress;

                // 약간의 위치 변화
                copy.data[i * 4 + 0] += jitter * progress; 
                copy.data[i * 4 + 1] += jitter * progress; 
                copy.data[i * 4 + 2] += jitter * progress; 
            }

            ctx.putImageData(copy, 0, 0);
            requestAnimationFrame(render);
        }

        canvas.addEventListener('mouseenter', () => {
            target = 1;
        });

        canvas.addEventListener('mouseleave', () => {
            target = 0;
        });
    </script>