HTML5无法直接用CSS filter实现铜版画效果，因其需逐像素计算非线性点阵分布；必须通过Canvas 2D手动实现灰度转换、分块采样与点阵模板填充。
HTML5 本身没有内置“铜版画滤镜”这种现成效果，filter CSS 属性也不支持铜版画（mezzotint）这类高度定制的半色调模拟。真要实现，得靠 Canvas 2D 手动绘制，或用 WebGL（如通过 Three.js 或自定义 shader），但绝大多数实际场景下，用 Canvas 就够了。
为什么不能直接用 CSS filter 实现铜版画
CSS 的 filter（如 grayscale()、contrast()、url(#svg-filter)）仅支持有限的预设操作，而铜版画的核心是：基于局部亮度生成方向性点阵/颗粒，且点密度与明暗呈非线性映射——这必须逐像素计算，SVG 滤镜也难以精确建模。
-
feTurbulence+feDisplacementMap可模拟噪点，但无法控制点形状与分布逻辑 -
feColorMatrix只能做线性变换，不能实现阈值抖动或点阵采样 -
浏览器对 SVG 滤镜的硬件加速支持差，性能远不如 Canvas 2D 的
getImageData()+putImageData()
Canvas 实现铜版画效果的关键三步
核心思路：把原图转灰度 → 分块采样亮度 → 在每个块内按亮度填充预设的铜版画点阵模板（如 8×8 点阵，0% 亮时全白，100% 暗时全黑，中间按阈值点亮对应数量的点）。
- 先用
ctx.drawImage()把图片绘制到离屏canvas，再调用ctx.getImageData()获取像素数据 - 灰度转换推荐用加权公式：
0.299 * r + 0.587 * g + 0.114 * b，比平均值法更符合人眼感知 - 点阵模板建议用
Uint8Array预存 64 元素的布尔数组（如dotPattern[64]），按亮度百分比取前 N 个true位置来绘点 - 绘点时别用
fillRect()逐个画——改用createImageData()直接写像素，否则 100×100 区域就卡顿
容易被忽略的性能与精度陷阱
铜版画效果对分辨率和采样粒度敏感，但盲目提高会爆炸式增加计算量。
立即学习“前端免费学习笔记（深入）”；
- 不要对整张高清图（如 1920×1080）直接处理：先用
drawImage()缩放到 400–600px 宽再采样 - 点阵尺寸选 4×4 或 8×8 足够，16×16 在普通屏上已难分辨，且计算量翻 4 倍
- 亮度映射别用简单线性：铜版画暗部细节丰富，建议用
Math.pow(lum, 0.7)压缩高光、拉伸阴影 - 导出为 PNG 时，确保
toDataURL('image/png')，JPEG 会引入压缩噪点，破坏点阵清晰度
真正难的不是算法，而是点阵模板的设计和亮度-点数映射曲线的调优——同一张图，换三条不同曲线，视觉感受可能从“复古版画”变成“粗糙印刷”。没现成轮子，就得自己调参、截图对比、反复重绘。
