diff --git a/src/Web/index.html b/src/Web/index.html
index 74b1878..3aeaebf 100644
--- a/src/Web/index.html
+++ b/src/Web/index.html
@@ -328,13 +328,16 @@
return;
}
- // 逐段渲染:每段的透明度基于数组索引位置,而非空间位置
+ // 多 Pass 叠线替代 shadowBlur,降低 GPU 占用
+ // 从外到内逐层绘制,每层线宽递减、透明度递增,模拟辉光效果
+
+ // 每段的透明度基于数组索引位置,而非空间位置
// 防止当鼠标锐角转动时,尾迹变淡后突然出现的问题
- ctx.lineWidth = 5.0;
- ctx.shadowColor = `rgba(${this.color}, 0.6)`;
- ctx.shadowBlur = 3;
- ctx.shadowOffsetX = 0;
- ctx.shadowOffsetY = 0;
+ const glowPasses = [ // 最外层辉光
+ { lineWidth: 9, alphaMul: 0.05 }, // 外层辉光
+ { lineWidth: 6.0, alphaMul: 0.5 }, // 内层辉光
+ { lineWidth: 4.5, alphaMul: 1.0 }, // 核心线
+ ];
const lastIdx = pts.length - 1;
// 每段的透明度基于数组索引位置,而非空间位置
@@ -353,8 +356,8 @@
const cp2x = a1.x - (next.x - a0.x) / 6;
const cp2y = a1.y - (next.y - a0.y) / 6;
- const alphaStart = i / lastIdx;
- const alphaEnd = (i + 1) / lastIdx;
+ const alphaStart = alpha(i / lastIdx);
+ const alphaEnd = alpha((i + 1) / lastIdx);
const segGrad = ctx.createLinearGradient(a0.x, a0.y, a1.x, a1.y);
segGrad.addColorStop(0, `rgba(${this.color}, ${alphaStart})`);
segGrad.addColorStop(1, `rgba(${this.color}, ${alphaEnd})`);
@@ -368,8 +371,8 @@
} else {
// 逐段渲染(直线版)
for (let i = 0; i < lastIdx; i++) {
- const alphaStart = i / lastIdx;
- const alphaEnd = (i + 1) / lastIdx;
+ const alphaStart = alpha(i / lastIdx);
+ const alphaEnd = alpha((i + 1) / lastIdx);
const a0 = pts[i];
const a1 = pts[i + 1];