canvas学习和滤镜实现

最近学习了 HTML5 中的重头戏–canvas。利用 canvas，前端人员可以很轻松地、进行图像处理。其 API 繁多，这次主要学习常用的 API，并且完成以下两个代码：

1. 实现去色滤镜
2. 实现负色(反色)滤镜

专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：
「微信公众号：心谭博客」| xin-tan.com | GitHub

1 了解 canvas？

1.1 什么是 canvas？

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

1.2 canvas 和 svg、vml 的区别？

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

2 canvas 绘图学习

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。而<canvas>元素本身默认的宽高分别是 300px、150px。

2.1 canvas 绘制矩形

// 处理canvas元素
var c = document.querySelector("#my-canvas");
c.width = 150;
c.height = 70;

// 获取 指定canvas标签 上的context对象
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000"; // 颜色
ctx.fillRect(0, 0, 150, 75); // 形状

2.2 canvas 绘制路径

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 开始坐标
ctx.lineTo(200, 100); // 结束坐标
ctx.stroke(); // 立即绘制

2.3 canvas 绘制圆形

对于ctx.arc()这个接口，5 个参数是:(x,y,r,start,stop)。其中，x 和 y 是圆心坐标，r 是半径。

而start和stop的单位是弧度制。不是长度，也不是 °。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d")