✨Effect Lab
Read the full guide完整技术长文 Why broken looks expensive为什么「坏掉」看起来很贵
📼

Film Grain 噪点颗粒

Every frame, a fresh ImageData buffer filled with random grey at 14% alpha. 每帧新建一块 ImageData,用随机灰填满,再以 14% 的透明度贴上去。

Canvas 2DcreateImageDataPer-pixel
Live demo实时演示

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

How it works原理拆解

This is the one effect that is genuinely per-pixel: the loop writes random values into all four channels of a new ImageData and blits it with putImageData. Alpha is fixed at 35/255, which is what makes it grain over the content rather than a white noise screen. 这是少数真正逐像素的效果:循环往新 ImageData 的四个通道写随机值,再用 putImageData 贴回画布。alpha 固定 35/255,正是这个值让它成为「覆盖在内容上的颗粒」,而不是一块雪花屏。

What to change可以改的地方

  • 1Raise the alpha to 80 for aggressive film grain, or lower it to 10 for a subtle texture.
  • 2Update only every other frame to halve the cost at almost no visual difference.
  • 1alpha 提到 80 是粗颗粒胶片,降到 10 是极细的质感。
  • 2隔帧才刷新,成本减半、肉眼几乎看不出差别。

Source code源码

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

grain.html