Canvas 10款基础滤镜（原理篇）

---

theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

在学习 Canvas 的路上大概率会了解到 滤镜 ，这是个很有趣的东西。

用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。

但先别关掉文章，没基础也没关系，不是还可以复制粘贴吗？(像极了正则表达式)

我在学习的过程中也尝试过写一些简单的滤镜，也收集过很多滤镜。但由于历史有点久远了，我找不到收集回来的滤镜出处了。如果有冒犯到原作者，请联系我进行整改~

如果你对 Canvas 感兴趣，可以关注《一看就懂的 Canvas 专栏》

本文使用到的猫咪图片素材来自 The Cat API。

如果想要更多猫猫狗狗的API，可以查看 《前端需要的免费在线api接口》 。

开发环境

本文所列出的例子都是在 .html 文件里编写的，可以直接看看代码仓库。

需要注意的是，本例使用到的方法虽然是 Canvas 原生操作像素的方法，但必须有个服务器才能运行起来，不然不会生效。

可以搭建本地服务器运行本文案例，方法有很多种。

比如你使用 Vue 或者 React 的脚手架搭建的项目，运行后就能跑起本文所有案例。

又或者使用 http-server 启动本地服务。

本文使用一个更简单的工具。我用 VS Code 开发，安装了 Live Server 插件，它可以启动一个本地服务，同时自带热更新功能。

开发环境方面就讲这么多，不是本文重点。如果是在不懂怎么搭建环境可以在留言区提问~

滤镜原理

众所周知，位图是由像素组成，像素是位图最小的信息单元。 你可以把日常看到大多数图片理解成由一个个点组成的图像。

滤镜的作用是通过具体规则，将图像中的像素点按照计算得出的公式修改一遍再重新渲染出来。

比如这样，将左侧的黑猫照片反色，原本白色的像素变成黑色，原本是黑色的像素变成白色。 而这就是具体规则。

滤镜就是操作像素点，在 Canvas 里有3个常用的 API 可以完成像素点的操作。

它们分别是：

• getImageData()
• putImageData()
• createImageData()

getImageData()

getImageData() 方法可以获取图片的数据。比如组成图片的像素集、图片的宽高等信息。

语法：

js context.getImageData(x, y, width, height)

• x: 开始复制的左上角位置的 x 坐标。
• y: 开始复制的左上角位置的