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];