当前位置：首页 > article >正文

用 HTML5 Canvas 和 JavaScript 实现流星雨特效

article 2025/1/8 15:49:24

最近在研究前端动画效果时，实现了一个超酷的流星雨特效，今天来和大家分享下具体实现过程。

1，整体实现思路

这个流星雨特效主要由 HTML、CSS 和 JavaScript 协同完成。HTML 搭建基础结构，CSS 负责页面样式设计，JavaScript 实现星星和流星的动态效果。
效果展示：

2，关键代码解析

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>
    <style>
        /* 省略CSS代码 */
    </style>
</head>

<body>
    <button id="fullscreenButton">全屏</button>
    <canvas id="meteorCanvas"></canvas>
    <audio id="backgroundMusic" loop>
        <source src="background.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <script>
        /* 省略JavaScript代码 */
    </script>
</body>

</html>

这里定义了一个全屏按钮、用于绘制动画的canvas画布以及播放背景音乐的audio标签。

2.2 CSS 样式

body,
html {
   
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(to bottom, #000011, #000033);
}

canvas {
   
    display: block;
}

#fullscreenButton {
   
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
}

通过 CSS 设置渐变背景模拟夜空，同时对canvas和按钮的样式进行布局，按钮在右下角且有半透明背景。

2.3 JavaScript 核心逻辑

2.3.1 画布设置

const canvas = document.getElementById("meteorCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

获取canvas元素及其绘图上下文，并设置画布尺寸与窗口一致。

2.3.2 星星类

class Star {
   
    constructor() {
   
        this.init();
    }

    init() {
   
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.