纯HTML5素描效果需分两步：先加权灰度转换与非线性拉伸保留明暗过渡，再用Sobel/Laplacian卷积提取边缘；推荐SVG feConvolveMatrix加速实现，避免主线程卡顿。
Canvas 2D 上用 getImageData + 灰度 + 边缘检测模拟素描效果
纯 HTML5 实现“素描风”不依赖 WebGL 或第三方库，核心是 Canvas 2D 的像素级操作。真实素描不是简单灰度+高对比，而是强调明暗过渡与线条感，所以得拆成两步：先提亮暗部保留细节，再用 Sobel 或 Laplacian 算子增强边缘。
关键点在于：getImageData 拿到原始 RGBA 数组后，不能直接套阈值二值化（那样会丢失中间调），而要先做加权灰度转换（0.299 * r + 0.587 * g + 0.114 * b），再对灰度值做非线性拉伸（比如伽马校正或分段映射），最后用 3×3 卷积核计算梯度幅值作为“线条强度”。
- 避免直接用
ctx.filter = "grayscale(1) contrast(2)"—— CSS filter 无法控制边缘提取逻辑，且不支持自定义卷积 - 输入图像尺寸别超过 1200px 宽，否则
getImageData在低端设备上易卡顿 - 边缘检测后建议叠加原灰度图的 30% 透明度，否则纯线条图显得单薄
用 convolveMatrix（SVG 滤镜）快速实现简易素描风
如果只要轻量、可复用、兼容性够用的效果，SVG 的 feConvolveMatrix 是更优解。它能在 GPU 加速路径下运行，且支持指定 kernelMatrix 直接做边缘增强，比 JS 操作像素快一个数量级。
典型配置是用 Sobel X+Y 合并的近似核：
立即学习“前端免费学习笔记（深入）”；
-
bias="128"很关键 —— 把卷积结果从有符号范围（-255~255）偏移到无符号（0~255），否则边缘变黑块 - 两个
feConvolveMatrix分别算 X/Y 方向梯度，再用feMerge叠加，比单次 3×3 复合核更可控 - IE 完全不支持，Edge 17+ 支持，Chrome/Firefox/Safari 均可用
WebGL 方案里 gl.LINEAR 和 gl.NEAREST 对素描质感的影响
用 Three.js 或原生 WebGL 做素描滤镜时，采样器设置直接影响线条锐利度。素描需要硬边而非柔化，所以纹理采样必须关掉双线性插值。
- 着色器中声明
sampler2D时，绑定纹理前务必调用：gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST) - 若用了 MipMap，还得禁用：
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0)，否则小尺寸下自动降采样会糊掉线条 - 边缘检测 shader 中，用
smoothstep(0.3, 0.7, edgeIntensity)替代step()可保留一点过渡，避免生硬断层
移动端 canvas 素描滤镜卡顿的三个硬伤和绕过方式
在 iOS Safari 或 Android Chrome 上，getImageData + for 循环处理大图极易掉帧。这不是代码写得不够优化，而是浏览器对像素读写的限制本身就很严。
- 别在主线程跑完整流程 —— 把灰度转换和卷积拆成 Web Worker，只传
Uint8ClampedArray进去，返回处理后的数组 - 避免每帧都重算：对静态图，生成一次
Uint8ClampedArray缓存起来；动态视频流则降采样到 640×480 再处理 - 真要实时渲染，优先选 SVG 滤镜或
OffscreenCanvas（但注意：iOS Safari 至今不支持OffscreenCanvas）
最常被忽略的是：素描效果是否需要保留原始色彩信息？如果只是预览用途，灰度+边缘足够；但若后续要叠加彩色手绘层，就得在边缘图之外额外保存一份 HSV 色相通道，不然重着色会失真。
