JavaScript实现HTML5 Canvas特效滤镜库

"纯JavaScript实现HTML5 Canvas六种特效滤镜，包括反色、灰色调、模糊、浮雕、雕刻和镜像。这些滤镜已封装到gloomyfishfilter.js文件中，提供了可调用的API接口。" 在HTML5中，Canvas是一个强大的绘图工具，允许开发者在网页上动态绘制图形。本示例中，作者通过JavaScript实现了对Canvas上的图像应用六种常见的滤镜效果。下面将详细讲解每一种滤镜的实现原理和相关技术。 1. 反色滤镜：该滤镜通过对每个像素的RGB值取255减去原值来实现。新RGB值分别为(255-r, 255-g, 255-b)，这样可以将图像中的颜色反转。 2. 灰色调滤镜：灰色调滤镜是通过将每个像素的RGB值转换为对应的灰度值。灰度值计算方法为：newr = (r * 0.272) + (g * 0.534) + (b * 0.131); newg = (r * 0.349) + (g * 0.686) + (b * 0.168); newb = (r * 0.393) + (g * 0.769) + (b * 0.189); 这样的比例基于人眼对不同颜色敏感度的加权平均。 3. 模糊滤镜：模糊滤镜通常通过卷积操作实现，这里可能采用了5x5的卷积核，通过对像素邻域内的像素进行加权平均，使图像看起来模糊。 4. 浮雕与雕刻滤镜：这两种滤镜是基于相邻像素之间的差异来创建视觉上的深度感。浮雕效果通常会突出前景，而雕刻效果则强调背景。具体实现可能涉及计算当前像素与其前后像素的RGB差值，然后加上一个常数值（如128）以增强对比。 5. 镜像滤镜：镜像滤镜模仿物体在镜中的反射，通常会沿水平或垂直轴翻转图像，实现图像的对称效果。 在实际应用中，首先需要获取Canvas的2D渲染上下文（2D context），通过`canvas.getContext("2d")`方法实现。然后，可以通过`drawImage()`方法将DOM中的`img`元素绘制到Canvas上，以便对其进行滤镜处理。例如： ```javascript var source = document.getElementById("source"); tempContext.drawImage(source, 0, 0, canvas.width, canvas.height); ``` 在完成滤镜效果后，可以调用封装好的API来应用这些滤镜，比如`applyFilter(context, 'grayScale')`来应用灰色调滤镜。 这个示例提供了一种使用纯JavaScript实现Canvas滤镜的方法，对于学习Canvas图形处理和JavaScript编程技巧非常有帮助。通过理解这些滤镜的实现原理，开发者可以进一步扩展和自定义自己的图像处理效果。