Canvas学习与过滤器实现

最近学习了HTML5的重头戏——canvas。使用canvas，前端人员可以轻松便捷的进行图像处理。它有很多API。本次主要学习常用的API，完成以下两段代码：实现去色滤镜和实现负色（反色）滤镜。欢迎进群：_857989948_。IT技术深度交流与分享，涉及但不限于：网站制作、运营、UI设计、算法分析、大数据、人工智能等。本组专注于技术交流，有深度，有态度。欢迎热衷于记录知识的小伙伴加入。1了解画布？1.1什么是画布？此HTML元素专为客户端矢量图形而设计。它没有自己的行为，但向客户端JavaScript公开了一个绘图API，以便脚本可以在画布上绘制任何它们想要的东西。1.2canvas、svg、vml有什么区别？标签与SVG和VML之间的一个重要区别是具有基于JavaScript的绘图API，而SVG和VML使用XML文档来描述绘图。2Canvas绘图学习大多数Canvas绘图API并不是定义在元素本身，而是定义在一个通过canvas的getContext()方法得到的“绘图环境”对象上。元素本身的默认宽度和高度分别为300px和150px。2.1Canvas绘制矩形//处理canvas元素varc=document.querySelector("#my-canvas");c.width=150;c.height=70;//获取指定canvas标签上的context对象varctx=c.getContext("2d");ctx.fillStyle="#FF0000";//颜色ctx.fillRect(0,0,150,75);//shape2.2画布绘制路径varc=document.querySelector("#my-canvas");varctx=c.getContext("2d");ctx.moveTo(0,0);//起始坐标ctx.lineTo(200,100);//结束坐标ctx.stroke();//立即绘制2.3Canvas绘制圆圈对于ctx.arc()接口，5个参数分别是：(x,y,r,start,stop)。其中x和y是圆心的坐标，r是半径。开始和停止的单位是弧度。不是长度，也不是°。varc=document.querySelector("#my-canvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();2.4画布绘制文字varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.font="30pxArial";ctx.fillText("HelloWorld",10,50);3Canvas图像处理学习3.1常用API接口图像处理的API主要有四种：绘制图像：drawImage(img,x,y,width,height)或drawImage(img,sx,sy,swidth,height,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。如下图，图片绘制到canvas中：4这里实现滤镜我们主要借用getImageData函数，他返回每个像素点的RGBA值。借助图像处理公式，对像素点进行操作，进行相应的数学运算即可。什么是RGBA？更多滤镜实现4.1去色效果去色效果相当于老相机拍的黑白照片。人们根据人眼的敏感度给出如下公式：gray=red*0.3+green*0.59+blue*0.11代码如下：效果如下图所示：4.2负色效果负色效果是RGB中的最大值减去当前值得到的值，getImageData理论最大值为：255.所以，公式如下：new_val=255-val代码如下：效果图如下：本文来自董源鑫个人网站，转载请注明出处。更多知识或技术交流：请访问godbmw.com