【canvas】前端创造的图片粒子动画效果：HTML5 Canvas 技术详解

这篇文章距离上次修改已过236天，其中的内容可能已经有所变动。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas 粒子动画</title>
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="particles-canvas"></canvas>
    <script>
        const canvas = document.getElementById('particles-canvas');
        const ctx = canvas.getContext('2d');
        const width = window.innerWidth;
        const height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        const particleCount = 200;
        const particles = [];
        const mouse = {x: width / 2, y: height / 2};

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 2;
                this.vy = (Math.random() - 0.5) * 2;
                this.radius = Math.random() * 1.2;
                this.life = 1;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.life -= 0.0005;
            }

            draw() {
                ctx.beginPath();
                ctx.globalAlpha = this.life;
                ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
                ctx.fillStyle = '#fff';
                ctx.fill();
            }
        }

        function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle(mouse.x, mouse.y));
            }
            animate();
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }
            requestAnimationFrame(animate);
        }

        // 监听鼠标移动事件
        window.onmousemove = (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        };

        init();
    </script>
</body>
</html>

这段代码创造了一个简单的鼠标跟随的粒子动画效果。通过更改particleCount的值可以控制粒子的数量，通过调整Particle类中的this.vx和this.vy的值可以改变粒子的移动速度和方向。通过这个例子，开发者可以学习到如何使用Canvas API创建基本的动画效果，并且可以通过调整参数来实现不同的视觉效果。

【canvas】前端创造的图片粒子动画效果：HTML5 Canvas 技术详解

评论已关闭

推荐阅读