✨Effect Lab
Read the full guide完整技术长文 Treating the pointer as a signal, not an event把指针当作信号,而不是事件
🎨

Neon Canvas 霓虹画板

Hold and drag to paint glowing strokes; the whole neon look is one shadowBlur setting. 按住拖动就能画发光笔迹,整个霓虹感只靠一个 shadowBlur。

Canvas 2DshadowBlurPointer state
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

A boolean drag flag is set on mousedown and cleared on mouseup, and mousemove returns early when it is false. Each stroke point is a filled circle with shadowBlur 22 and shadowColor set to the same hsl as the fill — that is what produces the halo. Because nothing clears the canvas, strokes accumulate like real paint. mousedown 置一个 drag 标志,mouseup 清掉,mousemove 里先判断标志再决定要不要画。每个点是一个实心圆,shadowBlur 设 22、shadowColor 设成和填充同一个 hsl——光晕就是这么来的。因为全程不清屏,笔迹会像真颜料一样叠加。

What to change可以改的地方

  • 1Raise shadowBlur to 40 for a soft tube light, drop it to 4 for a laser.
  • 2Use lineTo between consecutive points for a continuous stroke instead of a dotted one.
  • 1shadowBlur 调到 40 是柔光灯管,调到 4 是激光笔。
  • 2相邻点之间用 lineTo 连起来,就从点状变成连续笔迹。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

neondraw.html