当然可以！下面是一个**完整的
HTML + JavaScript 版雪花万花筒生成器**，专为 **
108
0×
192
0 竖屏设备（如手机）优化**，你只需将代码保存为 `
.html` 文件，用浏览器打开即可运行 —— **无需安装任何依赖，开箱即用 ✅**
---
### 🌐 功能亮点
- ✅ 响应式布局：适配
108
0×
192
0 及其他分辨率
- ✅ 四个可调参数滑块（深度、波动、弯曲、对称）
- ✅ 实时预览 & 一键生成新雪花
- ✅ 支持保存为 PNG 图片
- ✅ 使用 Canvas 绘图，性能流畅
- ✅ 视觉风格像“数字万花筒”——绚丽、
动态、艺术感强
---
### 📄 完整
HTML 文件（复制粘贴即可使用）
```
html
<!DOCTYPE
html>
<
html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=
1.0"/>
<title>❄️ 数字万花筒 - 雪花生成器</title>
<style>
* {
margin:
0;
padding:
0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: #
000;
color: #
0af;
display: flex;
flex-direction: column;
align-items: center;
height:
100vh;
overflow: hidden;
padding: 2
0px;
gap:
15px;
}
h
1 {
font-size:
1.6em;
margin-top:
10px;
color: #fff;
}
#canvas-container {
flex: 3;
width: 9
0%;
max-width:
108
0px;
background: #
000;
border: 2px solid #333;
border-radius:
15px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
max-width:
100%;
max-height:
100%;
object-fit: contain;
}
.controls {
flex: 2;
width: 9
0%;
max-width:
108
0px;
background: #
111;
border-radius:
15px;
padding: 2
0px;
color: #fff;
}
.slider-group {
margin-bottom:
15px;
}
label {
display: block;
margin-bottom: 5px;
font-size:
0.9em;
}
input[type="range"] {
width:
100%;
}
.value-display {
text-align: right;
font-family: monospace;
color: #
0af;
font-size:
1.1em;
margin-top: 2px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
margin:
10px
0;
}
button {
margin-top:
15px;
padding:
12px 24px;
font-size:
1.1em;
width:
100%;
border: none;
border-radius:
10px;
cursor: pointer;
transition: all
0.3s;
}
#generate-btn {
background: #
0a8;
color: white;
}
#save-btn {
background: #
08f;
color: white;
margin-top:
10px;
}
button:hover {
opacity:
0.9;
transform: scale(
1.02);
}
</style>
</head>
<body>
<h
1>🎨 数字万花筒 - 雪花生成器</h
1>
<div id="canvas-container">
<canvas id="snowflake-canvas"></canvas>
</div>
<div class="controls">
<div class="slider-group">
<label>递归深度 (
1-5): 更深 = 更复杂</label>
<input type="range" id="depth" min="
1" max="5" value="3" step="
1"/>
<div class="value-display"><span id="depth-value">3</span></div>
</div>
<div class="slider-group">
<label>臂长波动 (
0.0~
1.0): 随机性</label>
<input type="range" id="variance" min="
0" max="
1" value="
0.3" step="
0.05"/>
<div class="value-display"><span id="variance-value">
0.3
0</span></div>
</div>
<div class="slider-group">
<label>弯曲强度 (-5~5): 曲线感</label>
<input type="range" id="curvature" min="-5" max="5" value="
1" step="
0.1"/>
<div class="value-display"><span id="curvature-value">+
1.0</span></div>
</div>
<div class="slider-group">
<label>对称模式:
0=六重,
1=八重, 2=三重, 3=五重</label>
<input type="range" id="symmetry" min="
0" max="3" value="
0" step="
1"/>
<div class="value-display"><span id="symmetry-value">
0</span></div>
</div>
<div class="checkbox-label">
<input type="checkbox" id="live-preview" checked />
<label for="live-preview">✅ 实时预览</label>
</div>
<button id="generate-btn">🎨 生成新雪花</button>
<button id="save-btn">💾 保存图片</button>
</div>
<script>
// 获取元素
const canvas = document
.getElementById('snowflake-canvas');
const ctx = canvas
.getContext('2d');
// 参数滑块
const depthSlider = document
.getElementById('depth');
const varianceSlider = document
.getElementById('variance');
const curvatureSlider = document
.getElementById('curvature');
const symmetrySlider = document
.getElementById('symmetry');
const livePreviewCheckbox = document
.getElementById('live-preview');
// 显示数值标签
const depthValue = document
.getElementById('depth-value');
const varianceValue = document
.getElementById('variance-value');
const curvatureValue = document
.getElementById('curvature-value');
const symmetryValue = document
.getElementById('symmetry-value');
// 按钮
const generateBtn = document
.getElementById('generate-btn');
const saveBtn = document
.getElementById('save-btn');
// 同步显示值
function updateValues() {
depthValue
.textContent = depthSlider
.value;
varianceValue
.textContent = parseFloat(varianceSlider
.value)
.toFixed(2);
curvatureValue
.textContent = parseFloat(curvatureSlider
.value)
.toFixed(
1)
.padStart(4, ' ');
symmetryValue
.textContent = symmetrySlider
.value;
if (livePreviewCheckbox
.checked) {
drawSnowflake();
}
}
// 监听滑块变化
[depthSlider, varianceSlider, curvatureSlider, symmetrySlider]
.forEach(s => {
s
.addEventListener('input', updateValues);
});
// HSV 转 RGB
function hsvToRgb(h, s, v) {
let r, g, b, i, f, p, q, t;
i = Math
.floor(h * 6);
f = h * 6 - i;
p = v * (
1 - s);
q = v * (
1 - f * s);
t = v * (
1 - (
1 - f) * s);
switch (i % 6) {
case
0: r = v; g = t; b = p; break;
case
1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
return [r * 255, g * 255, b * 255];
}
// 绘制分支（递归）
function drawBranch(ctx, x, y, length, angle, depth, curvature, variance, color) {
if (depth <=
0 || length < 5) return;
const rad = angle * Math
.PI /
18
0;
const x2 = x + length * Math
.cos(rad);
const y2 = y + length * Math
.sin(rad);
// 添加正弦扰动模拟晶体
生长
const steps = 6;
const points = [[x, y]];
for (let i =
1; i < steps; i++) {
const ratio = i / steps;
const dx = length * ratio * Math
.cos(rad);
const dy = length * ratio * Math
.sin(rad);
const wobble = Math
.sin(ratio * Math
.PI * 2) * curvature * ratio *
10;
const px = x + dx + wobble * Math
.sin(rad);
const py = y + dy - wobble * Math
.cos(rad);
points
.push([px, py]);
}
points
.push([x2, y2]);
ctx
.beginPath();
ctx
.moveTo(points[
0][
0], points[
0][
1]);
for (let i =
1; i < points
.length; i++) {
ctx
.lineTo(points[i][
0], points[i][
1]);
}
ctx
.strokeStyle = color;
ctx
.lineWidth = Math
.max(
1, length / 2
0);
ctx
.stroke();
// 分叉
if (depth >
1) {
const newLength = length *
0.4 * randomRange(
1 - variance,
1 + variance);
const branchAngle
1 = angle + 3
0 + randomInt(-
15,
15);
const branchAngle2 = angle - 45 - randomInt(-
15,
15);
drawBranch(ctx, x2, y2, newLength, branchAngle
1, depth -
1, curvature, variance, color);
drawBranch(ctx, x2, y2, newLength, branchAngle2, depth -
1, curvature, variance, color);
}
}
// 工具函数
function randomRange(min, max) {
return Math
.random() * (max - min) + min;
}
function randomInt(min, max) {
return Math
.floor(Math
.random() * (max - min +
1)) + min;
}
// 主绘制函数
function drawSnowflake() {
const rect = canvas
.getBoundingClientRect();
canvas
.width = rect
.width * window
.devicePixelRatio;
canvas
.height = rect
.height * window
.devicePixelRatio;
const cx = canvas
.width / 2;
const cy = canvas
.height / 2;
ctx
.scale(window
.devicePixelRatio, window
.devicePixelRatio);
ctx
.clearRect(
0,
0, cx * 2, cy * 2);
const depth = +depthSlider
.value;
const variance = +varianceSlider
.value;
const curvature = +curvatureSlider
.value;
const symmetryMode = +symmetrySlider
.value;
const symMap = {
0: 6,
1: 8, 2: 3, 3: 5 };
const numArms = symMap[symmetryMode];
const baseHue = Math
.random();
for (let i =
0; i < numArms; i++) {
const hue = (baseHue + i *
0.7 / numArms) %
1;
const [r, g, b] = hsvToRgb(hue,
0.8,
1.0);
const color = `rgb(${r|
0}, ${g|
0}, ${b|
0})`;
const angle = i * (36
0 / numArms);
const len = randomRange(6
0,
100);
drawBranch(ctx, cx, cy, len, angle, depth, curvature, variance, color);
}
}
// 生成新雪花
generateBtn
.addEventListener('click', drawSnowflake);
// 保存图片
saveBtn
.addEventListener('click', () => {
const link = document
.createElement('a');
link
.download = 'snowflake-' + new Date()
.getTime() + '
.png';
link
.href = canvas
.toDataURL('image/png');
link
.click();
});
// 初始绘制
window
.addEventListener('load', () => {
updateValues(); // 更新数值显示
drawSnowflake(); // 初次绘制
});
// 窗口大小改变时重绘
window
.addEventListener('resize', () => {
setTimeout(drawSnowflake,
100);
});
</script>
</body>
</
html>
```
---
### ✅ 如何使用？
1. 复制上面全部代码
2
. 打开记事本（Notepad）或 VS Code
3
. 粘贴 → 保存为：`snowflake
.html`
4
. 双击这个文件 → 浏览器自动打开运行！
📱 推荐在 **Chrome / Edge / Safari** 中打开，支持手机端触控操作。
---
### 💡 效果
演示（想象中）
- 屏幕上方是黑色画布，一朵绚丽的彩色雪花缓缓呈现
- 下方四个滑块可拖动调节
- 勾选“实时预览”后，滑动时雪花会
动态变化
- 点击“生成新雪花”刷新图案
- 点击“保存图片”下载 PNG 到本地
---
### 📦 进阶用途建议
- 把它部署到 GitHub Pages，变成一个在线艺术玩具 🔗
- 加入背景音乐（用 `<audio>` 标签）
- 添加“模板”按钮：一键切换「极简」「狂野」「梦幻」风格
- 用 Capacitor 或 Cordova 打包成安卓/iOS App
---
HTML实现树生长动态演示
扫一扫
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
