【网页设计】春节页面背景模板

news2025/1/8 11:51:03

无偿下载地址：https://download.csdn.net/download/weixin_47040861/88811143

1.实现效果

2.代码

1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <img src="./image/鞭炮.gif" class="gifL">
    <img src="./image/鞭炮.gif" class="gifR">
    <canvas id="canvas"></canvas>
    <div class="middle"></div>

</body>

</html>

<script src="./index.js"></script>

2.css

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}
body{
    background-image: url(./image/bg.png);
    background-size: 100% 100%;
}
.gifL,.gifR{
    position: absolute;
    height: 100vh;
}
.gifR{
    right: 0;
}
#canvas{
    position: absolute;
    z-index: -1;
}
.middle{
    height: 100vh;
    width: 100vh;
    margin: 0 auto;
    position: relative;
    text-align: center;
    background-color: rgb(255, 255, 255,0.5);/*颜色*/
}

3.JavaScript

window.addEventListener("resize", resizeCanvas, false);
    window.addEventListener("DOMContentLoaded", onLoad, false);
    window.requestAnimationFrame =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };

    var canvas, ctx, w, h, particles = [], probability = 0.02,
        xPoint, yPoint;

    function onLoad() {
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        resizeCanvas();
        drawBackgroundImage();
        window.requestAnimationFrame(updateWorld);
    }

    function resizeCanvas() {
        if (!!canvas) {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
        }
    }

    function updateWorld() {
        update();
        paint();
        window.requestAnimationFrame(updateWorld);
    }

    function update() {
        if (particles.length < 500 && Math.random() < probability) {
            createFirework();
        }
        var alive = [];
        for (var i = 0; i < particles.length; i++) {
            if (particles[i].move()) {
                alive.push(particles[i]);
            }
        }
        particles = alive;
    }

    function paint() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.clearRect(0, 0, w, h);
        drawBackgroundImage();

        ctx.globalCompositeOperation = 'lighter';
        for (var i = 0; i < particles.length; i++) {
            particles[i].draw(ctx);
        }
    }

    function drawBackgroundImage() {
        var backgroundImage = new Image();
        backgroundImage.src = 'image/bg.png';
        ctx.drawImage(backgroundImage, 0, 0, w, h);
    }

    function createFirework() {
        xPoint = Math.random() * (w - 200) + 100;
        yPoint = Math.random() * (h - 200) + 100;
        var nFire = Math.random() * 50 + 100;
        var c = "rgb(" + (~~(Math.random() * 200 + 55)) + ","
            + (~~(Math.random() * 200 + 55)) + "," + (~~(Math.random() * 200 + 55)) + ")";
        for (var i = 0; i < nFire; i++) {
            var particle = new Particle();
            particle.color = c;
            var vy = Math.sqrt(25 - particle.vx * particle.vx);
            if (Math.abs(particle.vy) > vy) {
                particle.vy = particle.vy > 0 ? vy : -vy;
            }
            particles.push(particle);
        }
    }

    function Particle() {
        this.w = this.h = Math.random() * 4 + 1;
        this.x = xPoint - this.w / 2;
        this.y = yPoint - this.h / 2;
        this.vx = (Math.random() - 0.5) * 10;
        this.vy = (Math.random() - 0.5) * 10;
        this.alpha = Math.random() * .5 + .5;
        this.color;
    }

    Particle.prototype = {
        gravity: 0.05,
        move: function () {
            this.x += this.vx;
            this.vy += this.gravity;
            this.y += this.vy;
            this.alpha -= 0.01;
            if (this.x <= -this.w || this.x >= screen.width ||
                this.y >= screen.height ||
                this.alpha <= 0) {
                return false;
            }
            return true;
        },
        draw: function (c) {
            c.save();
            c.beginPath();
            c.translate(this.x + this.w / 2, this.y + this.h / 2);
            c.arc(0, 0, this.w, 0, Math.PI * 2);
            c.fillStyle = this.color;
            c.globalAlpha = this.alpha;
            c.closePath();
            c.fill();
            c.restore();
        }
    }

3.介绍

HTML结构：

定义了两个img标签显示两串鞭炮，canvas标签显示背景图片和烟花效果，在div标签middle中可以添加内容。

JavaScript部分：

通过事件监听器，在窗口大小变化和文档加载完成时分别触发 resizeCanvas 和 onLoad 函数。
创建全局变量 canvas、ctx、w、h、particles、probability、xPoint 和 yPoint 用于Canvas的绘制和动画控制。
resizeCanvas 函数在窗口大小变化时调整Canvas的大小。
onLoad 函数在文档加载完成后初始化Canvas并调用 updateWorld 函数开始动画。
updateWorld 函数是主循环，负责更新和绘制Canvas中的粒子。
update 函数用于更新粒子数组。
paint 函数负责清除画布并绘制背景图片以及粒子效果。
drawBackgroundImage 函数加载并绘制背景图片。
createFirework 函数创建烟花，随机生成烟花的位置、颜色和数量。
Particle 构造函数创建粒子对象，包含粒子的大小、位置、速度、透明度和颜色。
Particle 原型对象包含 gravity 属性和 move、draw 方法，用于更新粒子的位置和绘制粒子。