canvas进修和滤镜完成代码【html5教程】

这篇文章主要引见了canvas进修和滤镜完成代码，应用 canvas，前端职员可以很轻松地、举行图象处置惩罚，有肯定的参考价值，有须要的朋侪可以参考一下，愿望对你们有所协助。

在这个数码产品众多的时期里，照相已经成为生活不可或缺的一部分，不管是居家，踏青，照样远途游览，总会拍一些美美的照片。但相机直接拍出来的照片每每和我们的心思预期有肯定的差异，那末怎样减小这类差异呢？答案是美颜P图，因而种种美颜相机遮天蔽日而来，P图已经成为一门随身妙技。

实在所谓的美颜不过是许多滤镜的合营运用罢了，而滤镜就是经由过程肯定的算法来操纵图片像素进而取得一些特别的图象结果。用过Photoshop的朋侪都清晰ps中有一大堆的滤镜，下面我们将会用js的canvas手艺去完成几种滤镜结果。

近来进修了 HTML5 中的重头戏-- canvas 。应用 canvas，前端职员可以很轻松地、举行图象处置惩罚。其 API 繁多，此次主要进修经常使用的 API，而且完成以下两个代码：

完成去色滤镜
完成负色(反色)滤镜

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");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 canvas 绘制笔墨

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas 图象处置惩罚进修

3.1 经常使用 API 接口

关于图象处置惩罚的 API，主要有 4 个：

绘制图象： drawImage(img,x,y,width,height) 或 drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

猎取图象数据： getImageData(x,y,width,height)

重写图象数据： putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

导出图象： toDataURL([type, encoderOptions])

更细致的 API 和参数申明请看： canvas 图象处置惩罚 API 参数解说

3.2 绘制图象

在此些 API 的基础上，我们就可以在 canvas 元素中绘制我们的图片。假定我们图片是 ./img/photo.jpg 。

<script>
  window.onload = function () {
    var img = new Image() // 声明新的Image对象
    img.src = "./img/photo.jpg"
    // 图片加载后
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");

      // 依据image大小，指定canvas大小
      canvas.width = img.width
      canvas.height = img.height

      // 绘制图象
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
  }
</script>

以下图所示，图片被画入了 canvas：

4 完成滤镜

这里我们主要借用 getImageData 函数，他返回每一个像素的 RGBA 值。借助图象处置惩罚公式，操纵像素举行响应的、数学运算即可。

4.1 去色结果

去色结果相当于就是老旧相机拍出来的黑白照片。人们依据人眼的敏感水平，给出了以下公式：

gray = red * 0.3 + green * 0.59 + blue * 0.11

代码以下：

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 最先滤镜处置惩罚
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 盘算gray
        // 革新RGB，注重：
        // imgData.data[i * 4 + 3]寄存的是alpha，不须要修改
        imgData.data[i * 4] = gray;
        imgData.data[i * 4 + 1] = gray;
        imgData.data[i * 4 + 2] = gray;
      }
      ctx.putImageData(imgData, 0, 0); // 重写图象数据
    }
  }
</script>

结果以下图所示：

4.2 负色结果

负色结果就是用最大值减去当前值。而 getImageData 取得的 RGB 中的数值理论最大值是：255。所以，公式以下：

new_val = 255 - val

代码以下：

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 最先滤镜处置惩罚
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        // 革新RGB，注重：
        // imgData.data[i * 4 + 3]寄存的是alpha，不须要修改
        imgData.data[i * 4] = 255 - imgData.data[i * 4];
        imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1];
        imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2];
      }
      ctx.putImageData(imgData, 0, 0); // 重写图象数据
    }
  }
</script>

结果图以下：