python制作超炫流星雨表白,html写流星雨(完整代码)

作者：System 时间：2024年08月13日分类：所有,html 字数：2062

以下是一个简单的HTML和JavaScript代码示例，用于创建流星雨效果。你可以将这段代码保存为HTML文件，并通过浏览器打开查看效果。




<!DOCTYPE html>
<html>
<head>
    <title>流星雨</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
 
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const W = window.innerWidth;
        const H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
 
        let particles = [];
        let particleCount = 200;
 
        function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
            animate();
        }
 
        function animate() {
            ctx.clearRect(0, 0, W, H);
            for (let i = 0; i < particleCount; i++) {
                let p = particles[i];
                p.draw();
                p.update();
            }
            requestAnimationFrame(animate);
        }
 
        function Particle() {
            this.x = Math.random() * W;
            this.y = Math.random() * H;
            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();
            this.size = Math.random() * 2;
            this.life = 1;
 
            this.draw = function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
 
            this.update = function() {
                this.x += this.vx * 5;
                this.y += this.vy * 5;
                if (this.x > W || this.x < 0) this.vx *= -1;
                if (this.y > H || this.y < 0) this.vy *= -1;
            }
        }
 
        init();
    </script>
</body>
</html>

这段代码会在页面上创建一个canvas元素，并用JavaScript实现流星雨的效果。你可以根据需要调整particleCount来改变雨中星星的数量，以及通过调整颜色和大小来自定义样式。

python制作超炫流星雨表白,html写流星雨(完整代码)

评论已关闭

推荐阅读