canvas 滤镜之灰度效果

               实现灰度效果一般有两种方法：

        1，使求出每个像素点的R、G、B三个分量的平均值，然后将这个平均值赋予给这个像素的三个分量。基本公式如下：Gray = R*0.299 + G*0.587 + B*0.114

        2.根据YUV的颜色空间中，Y的分量的物理意义是点的亮度，由该值反映亮度等级，根据RGB和YUV颜色空间的变化关系可建立亮度Y与R、G、B三个颜色分量的对应：Y=0.3R+0.59G+0.11B，以这个亮度值表达图像的灰度值。

       以上这两种方法是基于两种不同的颜色空间，就其本质是一样的（需要进行颜色空间的转换）。接下来实现第一种方法，如果严格按照 Gray = R*0.299 + G*0.587 + B*0.114 这个基于小数点系数的公式计算得到的精度不会很高（由于应用要求不高），具体高精度的可以google

这是我前期写的代码，冗余过多   

<font size="4"><span style="color:#FF6666;"><span style="font-family:KaiTi_GB2312;color:#000000;">//灰度效果：(去色)
	function grayFilter(imageData) {
		var data = imageData.data,
			width = imageData.width;
		for (var i = 0; i < data.length - 4; i += 4) {
                       //遍历各像素分量	.299 * r + .587 * g + .114 * b;
			<span style="color:#FF0000;">var tmp = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.144;</span>

			data[i] = data[i + 1] = data[i + 2] = tmp;
		}
		return imageData;
	}</span></span></font>

原图：(我之前用马赛克效果处理过了)

灰度图：

     今天就一个灰度效果吧，其实这些效果大部分我觉得如果你不是想很深入的研究计算机图形学的话，只需要知道计算公式即可。后面的例子就直接上代码和效果图