daily-work-20261108:基于 Canvas 2D 与原生 JavaScript 的创意互动星图项目

打开即玩,点击画布播撒星尘,每圈点击荡开渐彩涟漪,自动撒星让画面永不冷场。基于 Canvas 2D 与原生 JavaScript 实现,零依赖零构建,内置每日随机种子,同一天星图气质一致,跨日焕然一新,单文件离线可用。【此简介由AI生成】

Branch1Tags0
FilesLast commitLast update
4 days ago
4 days ago
4 days ago
4 days ago
4 days ago
4 days ago
4 days ago

星屑涟漪 · 1108期

点击画布,让星尘荡开一圈圈光

在深邃夜幕上播撒星尘,每一次点击都荡开一圈渐彩涟漪,光晕扩散交错,织出当夜独一无二的星图。

架构图

实际运行截图


功能特性

特性 说明
涟漪引擎 点击任意位置即时生成一圈由内向外的彩色光波
自动撒星 无操作时每秒自动在随机位置播撒星尘,画面永不冷场
混色渐隐 多圈涟漪交叠处颜色相互渗透,缓慢淡出归于夜色
每日种子 内置当日随机种子,同一天的星图气质一致,跨日则焕然一新

系统架构

整体分为四层:

  1. 输入层 — 点击 / 自动计时器 → 生成涟漪事件
  2. 状态层 — 涟漪队列(圆心、半径、色相、生命值)
  3. 渲染层 — Canvas 2D 逐帧绘制描边圆环与透明度衰减
  4. 种子层 — mulberry32 伪随机数驱动布局与配色

技术栈

  • Canvas 2D — 全部视觉效果的原生绘制,无任何图形库
  • requestAnimationFrame / 定时器 — 逐帧渲染与世代节拍
  • 种子化伪随机(mulberry32) — 当日种子决定布局与配色,每天面貌一新
  • 原生 JavaScript (ES2020+) — 零依赖、零构建,单个 index.html 即可运行

快速开始

# 直接双击 index.html 用浏览器打开即可,离线可用

期号

1108 期 · 由每日锻造流水线自动生成,同主题次日会换上全新配色与参数。

许可证

MIT

Introduction

打开即玩,点击画布播撒星尘,每圈点击荡开渐彩涟漪,自动撒星让画面永不冷场。基于 Canvas 2D 与原生 JavaScript 实现,零依赖零构建,内置每日随机种子,同一天星图气质一致,跨日焕然一新,单文件离线可用。【此简介由AI生成】

Customize your domain