引子
在玩游戏的时候,碰到一个交互效果:背景一张看起来黑白的图,然后用擦除的交互,让图像变的有颜色。也想试试做这个效果,首先想到的是那个黑白的图是怎么形成的,于是就查资料,找到了用 Canvas 转换的方法。
思路
看起来是黑白的图像,其实是灰度图像,进一步说明见图像。这种图像的特点是像素的颜色分量取值都是一样的,而 Canvas 的方法 getImageData 可以获取到画布上的像素值数据,改变数据后,使用方法 putImageData 将数据绘制到画布上。这样就可以达到灰度图像的效果。
实现
这是示例页面,移动端访问如下: