昨天各大平台收到通知,需要首页以黑白效果来展示,高级浏览器有一个简单的属性,全局设置一下,就可以满足: -webkit-filter: grayscale(100%);filter: grayscale(100%); 在低级浏览器可以借助第三方插件来实现,比如说grayscale.js这种。 这种插件的原理,简单来说就是递归DOM结构,判断节点的类型,如果是文本直接更改其颜色值,如果是图片,通过canvas来更改颜色值。 如何改变图片的颜色呢,就是今天咱们来聊的色彩矩阵。 其实就是把每个像素值跟多维矩阵乘一下就得到一个新的像素值(rgba)(底部有封装好的初始矩阵通道) matrix!:A