Fix: 烟花/下雨改用clearRect不遮挡背景,雷电次数增至10次更密集
This commit is contained in:
@@ -112,11 +112,10 @@ const FireworksEffect = (() => {
|
||||
|
||||
// 动画循环
|
||||
function animate(now) {
|
||||
// 用半透明黑色覆盖,产生运动拖尾效果
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0.18)";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
// 清除画布(保持透明,不遮挡聊天背景)
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// 更新并绘制存活粒子
|
||||
// 更新并绘制存活粒子(粒子自带 alpha 衰减,视觉上有淡出效果)
|
||||
particles = particles.filter((p) => p.alpha > 0.02);
|
||||
particles.forEach((p) => {
|
||||
p.update();
|
||||
|
||||
@@ -91,8 +91,8 @@ const LightningEffect = (() => {
|
||||
*/
|
||||
function start(canvas, onEnd) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
const FLASHES = 5; // 总闪电次数
|
||||
const DURATION = 5000; // 总时长(ms)
|
||||
const FLASHES = 10; // 总闪电次数(增加密度)
|
||||
const DURATION = 7000; // 总时长(ms,相应延长)
|
||||
let count = 0;
|
||||
|
||||
// 间隔不规则触发多次闪电(模拟真实雷电节奏)
|
||||
@@ -102,13 +102,13 @@ const LightningEffect = (() => {
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
onEnd();
|
||||
}, 500);
|
||||
}, 400);
|
||||
return;
|
||||
}
|
||||
_flash(canvas, ctx);
|
||||
count++;
|
||||
// 下次闪电间隔:800ms ~ 1200ms 之间随机
|
||||
const delay = 700 + Math.random() * 500;
|
||||
// 下次闪电间隔:400ms ~ 800ms 之间随机(更频繁)
|
||||
const delay = 400 + Math.random() * 400;
|
||||
setTimeout(nextFlash, delay);
|
||||
}
|
||||
|
||||
|
||||
@@ -78,14 +78,9 @@ const RainEffect = (() => {
|
||||
let animId = null;
|
||||
const startTime = performance.now();
|
||||
|
||||
// 画"乌云"背景遮罩(让画面有阴暗感但不完全遮住聊天)
|
||||
ctx.fillStyle = "rgba(30, 40, 60, 0.18)";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
function animate(now) {
|
||||
// 用极轻微的透明背景刷新(保留少量拖尾感)
|
||||
ctx.fillStyle = "rgba(30, 40, 60, 0.08)";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
// 清除画布(保持透明,不遮挡聊天背景)
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
drops.forEach((d) => {
|
||||
d.update();
|
||||
|
||||
Reference in New Issue
Block a user