图片粒子雨

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const image = new Image();
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAACyCAMAAADVhOJOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzMUQyREY4MUM0RTExRUJCMDIxQUIyNUFEMkE2QUM1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzMUQyREY5MUM0RTExRUJCMDIxQUIyNUFEMkE2QUM1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjMxRDJERjYxQzRFMTFFQkIwMjFBQjI1QUQyQTZBQzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjMxRDJERjcxQzRFMTFFQkIwMjFBQjI1QUQyQTZBQzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5+AngIAAAAMFBMVEUMFU3q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';
image.addEventListener('load', function(){
    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    canvas.width = 572;
    canvas.height = 352;

let particlesArray = [];
    const numberOfParticles = 12000;
    const detail = 1;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

let grid = [];
    for (let y = 0; y < canvas.height; y += detail){
        let row = [];
        for (let x = 0; x < canvas.width; x += detail){
            const red = pixels.data[(y * 4 * pixels.width) + (x * 4)]
            const green = pixels.data[(y * 4 * pixels.width) + (x * 4 + 1)]
            const blue = pixels.data[(y * 4 * pixels.width) + (x * 4 + 2)]
            const color = 'rgb(' + red +',' + green + ',' + blue + ')';
            const brightness = calculateBrightness(red, green, blue)/100;

row.push(brightness);
        }  
        grid.push(row); 
    }

class Particle {
        constructor(){
            this.x = Math.random() * canvas.width;
            this.y =  0;
            //this.prevX = this.x;
            this.speed = 0;
            this.velocity = Math.random() * 0.7;
            this.size = Math.random() * 2 + .1;
        }
        update () {
            this.speed = grid[Math.floor(this.y / detail)][Math.floor(this.x / detail)];
            let movement = (2.5 - this.speed) + this.velocity;
            this.y += movement;
            if (this.y >= canvas.height) {
                this.y = 0;
                this.x = Math.random() * canvas.width;
            }
            //console.log(this.x += movement)
        }
        draw(){
            ctx.beginPath();
            ctx.fillStyle = 'white';
            ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
            ctx.fill();
        }
    }

function init(){
        for (let i = 0; i < numberOfParticles; i++){
            particlesArray.push(new Particle());
        }
    }
    init();

function animate () {
        ctx.globalAlpha = 0.05;
        ctx.fillStyle = 'rgb(0, 0,0)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = 0.2;
        for (let i = 0; i < particlesArray.length; i++) {
            particlesArray[i].update();
            ctx.globalAlpha = particlesArray[i].speed * 0.3;
            particlesArray[i].draw();
        }
        requestAnimationFrame( animate );
    }
    animate();

function calculateBrightness(red, green, blue){
        return Math.sqrt(
            (red * red) * 0.299 +
            (green * green) * 0.587 +
            (blue * blue) * 0.114
        );
    }

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg