HTML5 Canvas与JavaScript携手绘制动态星空背景

目录

一、程序代码

二、代码原理

三、运行效果

---

一、程序代码

二、代码原理

这段代码通过 HTML5 的 元素和 JavaScript 实现了一个星空背景效果。首先，它在页面加载时创建了一个全屏大小的画布，并使用 JavaScript 生成了多个具有不同运动轨道的星星对象。每颗星星都具有随机的半径、位置、运动速度和闪烁效果。通过使用定时器和 requestAnimationFrame 方法，实现了星星的运动和闪烁效果，从而呈现出逼真的星空背景。整体效果是一个动态的、具有视差效果的星空背景，为网页增添了视觉吸引力。

1. 首先是 HTML 结构部分：

   • 定义了一个 HTML 文档，并设置了字符集为 UTF-8。
   • 设置了页面的标题为“星空背景”。
   • 在 body 中定义了一个画布元素 ，并指定了一个 id 为 "canvas"。

2. 紧接着是 JavaScript 部分：

   • 获取了  元素以及其 2D 绘图上下文。
   • 设置了画布的宽度和高度为窗口的宽度和高度减去 50。
   • 定义了一些变量，如颜色值、存储星星的数组、星星数量等。

3. 创建用于渲染星星的小画布：

   • 创建了一个新的  元素作为缓存画布。
   • 设置了缓存画布的宽高，并获取其 2D 上下文。
   • 创建了一个径向渐变对象，定义了星星的颜色渐变规则。
   • 绘制了一个圆形填充的图案，代表星星的外观。

4. 定义了两个辅助函数：

   • random(min, max) 用于生成指定范围内的随机数。
   • maxOrbit(x, y) 用于确定星星轨道的最大半径。

5. 创建了一个构造函数 Star 用于创建星星对象：

   • 初始化了星星的轨道半径、半径大小、位置等属性。
   • 将每个创建的星星对象存储到 stars 数组中。

6. 定义了 Star 原型对象的 draw 方法：

   • 根据时间变化计算星星的位置坐标。
   • 控制星星闪烁效果的透明度变化。
   • 使用缓存画布绘制星星。
   • 更新星星的时间，实现星星的运动效果。

7. 创建了一定数量的星星对象，并将其存储在 stars 数组中。

8. 定义了 start 函数开始绘制星空背景：

   • 设置了画布的全局合成操作模式和透明度。
   • 填充了一个半透明的矩形作为背景。
   • 设置了全局合成操作模式为 'lighter'，实现星星的叠加效果。
   • 遍历所有星星对象，并调用其 draw 方法进行绘制。
   • 使用 window.requestAnimationFrame 实现动画效果。

9. 调用 start 函数，开始绘制星空背景效果。

三、运行效果