Neon Canvas 霓虹画板
Hold and drag to paint glowing strokes; the whole neon look is one shadowBlur setting. 按住拖动就能画发光笔迹,整个霓虹感只靠一个 shadowBlur。
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 文件就能跑,不需要任何库。