diff --git a/src/Web/index.html b/src/Web/index.html index 74b1878..b346f3d 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; // 每段的透明度基于数组索引位置,而非空间位置