本文介绍了如何利用JavaScript和Canvas实现图像的灰度处理。通过getImageData获取画布像素数据，调整每个像素的颜色分量使其相等，再用putImageData将处理后的数据绘制回画布，从而达到灰度效果。并提供了示例页面链接和相关参考资料。
引子
在玩游戏的时候，碰到一个交互效果：背景一张看起来黑白的图，然后用擦除的交互，让图像变的有颜色。也想试试做这个效果，首先想到的是那个黑白的图是怎么形成的，于是就查资料，找到了用 Canvas 转换的方法。
思路
看起来是黑白的图像，其实是灰度图像，进一步说明见图像。这种图像的特点是像素的颜色分量取值都是一样的，而 Canvas 的方法 getImageData 可以获取到画布上的像素值数据，改变数据后，使用方法 putImageData 将数据绘制到画布上。这样就可以达到灰度图像的效果。
实现
这是示例页面，移动端访问如下：
最低0.47元/天 解锁文章
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
