引子
在玩游戏的时候，碰到一个交互效果：背景一张看起来黑白的图，然后用擦除的交互，让图像变的有颜色。也想试试做这个效果，首先想到的是那个黑白的图是怎么形成的，于是就查资料，找到了用 Canvas 转换的方法。
思路
看起来是黑白的图像，其实是灰度图像，进一步说明见图像。这种图像的特点是像素的颜色分量取值都是一样的，而 Canvas 的方法 getImageData 可以获取到画布上的像素值数据，改变数据后，使用方法 putImageData 将数据绘制到画布上。这样就可以达到灰度图像的效果。
实现
这是示例页面，移动端访问如下：
主要实现如下：
/**
* 图像灰度处理
* @param {object} context canvas 上下文
* @param {number} sx 提取图像数据矩形区域的左上角 x 坐标。
* @param {number} sy 提取图像数据矩形区域的左上角 y 坐标。
* @param {number} sw 提取图像数据矩形区域的宽度。这要注意一下，canvas 标签上 width 属性值，不是渲染后实际宽度值，否则在高清手机屏幕下且做了高清处理，只能获取到部分图像宽度。
* @param {number} sh 提取图像数据矩形区域的高度。这要注意一下，canvas 标签上 height 属性值，不是渲染后实际高度值，否则在高清手机屏幕下且做了高清处理，只能获取到部分图像高度。
*/
function toGray(context,sx, sy, sw, sh) {
var imageData = context.getImageData(sx, sy, sw, sh);
var colorDataArr = imageData.data;
var colorDataArrLen = colorDataArr.length;
for(var i = 0; i < colorDataArrLen; i+=4) {
// 计算方式之一
var gray=(colorDataArr[i]+colorDataArr[i+1]+colorDataArr[i+2])/3;
colorDataArr[i] = gray;
colorDataArr[i+1] = gray;
colorDataArr[i+2] = gray;
}
context.putImageData(imageData,0,0);
}