lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 雪花改为深蓝轮廓+白色主体双遍绘制，浅色背景下清晰可辨

Browse Source
This commit is contained in:
流星
2026-02-27 14:29:03 +08:00
parent 57278c76c3
commit 998611f4ba
1 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/effects/snow.js
+52 -54
View File
@@ -2,70 +2,76 @@
* 文件功能：聊天室下雪特效
*
* 使用 Canvas 绘制真实六角雪花图案（6条主臂 + 左右分叉）。
* 雪花大小、速度、旋转角度随机，自然飘落效果。
* 采用深色描边+白色主体双遍绘制，在任何背景颜色上都清晰可见。
* 特效总时长约 10 秒，结束后自动清理并回调。
*/
const SnowEffect = (() => {
/**
* 在指定位置绘制一朵六角雪花
* 在指定位置绘制一朵六角雪花（深色轮廓 + 白色主体）
*
* @param {CanvasRenderingContext2D} ctx
* @param {number} x 中心 x
* @param {number} y 中心 y
* @param {number} r 主臂长度（半径）
* @param {number} r 主臂长度
* @param {number} alpha 透明度
* @param {number} rot 旋转角度（弧度）
*/
function _drawFlake(ctx, x, y, r, alpha, rot) {
ctx.save();
ctx.globalAlpha = alpha;
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = Math.max(1, r * 0.12);
ctx.shadowColor = "rgba(180, 210, 255, 0.9)";
ctx.shadowBlur = 4;
ctx.lineCap = "round";
ctx.translate(x, y);
ctx.rotate(rot);
// 绘制 6 条主臂（每 60° 一条）
for (let i = 0; i < 6; i++) {
ctx.save();
ctx.rotate((Math.PI / 3) * i);
// 两遍绘制：先深蓝色粗描边，再白色细线覆盖
// 这样在浅蓝、白色等背景上都清晰可辨
const passes = [
{ color: "rgba(30, 60, 140, 0.8)", lw: r * 0.22 + 2.5 }, // 深蓝粗描边
{ color: "rgba(255, 255, 255, 1.0)", lw: Math.max(1, r * 0.11) }, // 白色主体
];
// 主臂
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(r, 0);
ctx.stroke();
passes.forEach(({ color, lw }) => {
ctx.strokeStyle = color;
ctx.lineWidth = lw;
// 主臂上的两段斜向分叉（在 0.4r 和 0.65r 处）
const branchLen = r * 0.35;
const branchAngle = Math.PI / 4; // 45°
for (let i = 0; i < 6; i++) {
ctx.save();
ctx.rotate((Math.PI / 3) * i);
[0.4, 0.65].forEach((pos) => {
const bx = r * pos;
// 上分叉
// 主臂
ctx.beginPath();
ctx.moveTo(bx, 0);
ctx.lineTo(
bx + Math.cos(branchAngle) * branchLen,
Math.sin(branchAngle) * branchLen,
);
ctx.moveTo(0, 0);
ctx.lineTo(r, 0);
ctx.stroke();
// 下分叉（对称）
ctx.beginPath();
ctx.moveTo(bx, 0);
ctx.lineTo(
bx + Math.cos(branchAngle) * branchLen,
-Math.sin(branchAngle) * branchLen,
);
ctx.stroke();
});
ctx.restore();
}
// 斜向分叉（0.4r 和 0.65r 处各一对）
const branchLen = r * 0.35;
const branchAngle = Math.PI / 4; // 45°
[0.4, 0.65].forEach((pos) => {
const bx = r * pos;
// 上分叉
ctx.beginPath();
ctx.moveTo(bx, 0);
ctx.lineTo(
bx + Math.cos(branchAngle) * branchLen,
Math.sin(branchAngle) * branchLen,
);
ctx.stroke();
// 下分叉
ctx.beginPath();
ctx.moveTo(bx, 0);
ctx.lineTo(
bx + Math.cos(branchAngle) * branchLen,
-Math.sin(branchAngle) * branchLen,
);
ctx.stroke();
});
ctx.restore();
}
});
ctx.restore();
}
@@ -78,25 +84,19 @@ const SnowEffect = (() => {
this.reset(true);
}
/**
* 重置雪花位置
*
* @param {boolean} initial 初始化时 Y 随机分布全屏
*/
reset(initial = false) {
this.x = Math.random() * this.w;
this.y = initial ? Math.random() * this.h : -20;
this.r = Math.random() * 10 + 6; // 主臂长度 6-16px
this.speed = Math.random() * 1.2 + 0.4; // 下落速度（慢慢飘）
this.drift = Math.random() * 0.6 - 0.3; // 水平漂移
this.r = Math.random() * 10 + 7; // 主臂长度 7-17px（略放大）
this.speed = Math.random() * 1.2 + 0.4;
this.drift = Math.random() * 0.6 - 0.3;
this.alpha = Math.random() * 0.3 + 0.7; // 透明度 0.7-1.0
this.rot = Math.random() * Math.PI * 2; // 初始旋转角
this.rotSpd = (Math.random() - 0.5) * 0.02; // 旋转速度
this.rot = Math.random() * Math.PI * 2;
this.rotSpd = (Math.random() - 0.5) * 0.02;
this.wobble = 0;
this.wobSpd = Math.random() * 0.03 + 0.01; // 摇摆频率
this.wobSpd = Math.random() * 0.03 + 0.01;
}
/** 每帧更新 */
update() {
this.wobble += this.wobSpd;
this.x += Math.sin(this.wobble) * 0.5 + this.drift;
@@ -107,7 +107,6 @@ const SnowEffect = (() => {
}
}
/** 绘制雪花 */
draw(ctx) {
_drawFlake(ctx, this.x, this.y, this.r, this.alpha, this.rot);
}
@@ -124,9 +123,8 @@ const SnowEffect = (() => {
const w = canvas.width;
const h = canvas.height;
const DURATION = 10000;
const FLAKE_COUNT = 80; // 六角雪花绘制开销较大，80 个足够
const FLAKE_COUNT = 80;
// 初始化所有雪花，随机分布全屏
const flakes = Array.from(
{ length: FLAKE_COUNT },
() => new Flake(w, h),