使用帆布怎么实现一个滤镜功能 - 行业资讯 - 肥雀云

　　介绍

使用帆布怎么实现一个滤镜功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> 1了解画布吗?

<强> 1.1什么是帆布吗?

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

<强> 1.2画布和svg, vml的区别?

<代码> & lt; canvas> & lt; canvas>

<强> 2帆布绘图学习

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

<强> 2.1帆布绘制矩形

//,处理帆布元素　　var c =, document.querySelector (“# my-canvas"); 　　时间=c.width 150; 　　时间=c.height 70;//,获取,指定帆布标签,上的上下文对象　　var ctx =, c.getContext (“2 d"); 　　时间=ctx.fillStyle “# FF0000",//,颜色　　ctx.fillRect(0, 0, 150, 75),,//,形状

<强> 2.2帆布绘制路径

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

<强> 2.3帆布绘制圆形

对于<代码> ctx.arc() 这个接口,5个参数是:<代码> (x, y, r,启动、停止)>

而开始<代码> 和<代码>停止的单位是<强>弧度制强。不是长度,也不是,度;。

var c =, document.querySelector (“# my-canvas"); 　　var ctx =, c.getContext (“2 d"); 　　ctx.beginPath (); 　　ctx.arc(95, 50岁,40岁,0,,2,*,Math.PI); 　　ctx.stroke ();

<强> 2.4帆布绘制文字

var c =, . getelementbyid (“myCanvas"); 　　var ctx =, c.getContext (“2 d"); 　　时间=ctx.font “30 px Arial"; 　　ctx.fillText (“Hello World",, 10日,50);

<强> 3帆布图像处理学习

<强> 3.1常用API接口

关于图像处理的API,主要有4个:

绘制图像:<代码> drawImage (img, x, y,宽度、高度)或<代码> drawImage (img, sx, sy,向下,sheight, x, y,宽度、高度)

获取图像数据:<代码> getImageData (x, y,宽度、高度)

重写图像数据:<代码> putImageData (imgData x, y [, dirtyY dirtyX dirtyWidth, dirtyHeight])

导出图像:<代码> toDataURL([类型,encoderOptions])

更详细的API和参数说明请看:帆布图像处理API参数讲解

<强> 3.2绘制图像

在此些API的基础上,我们就可以在画布<代码> 元素中绘制我们的图片。假设我们图片是<代码>。/img/photo.jpg> & lt; script> 　　时间=window.onload 才能;function (), { 　　,,,var img =, new 图像(),//,声明新形象的对象　　,,,img.src =,“。/img/photo.jpg" 　　,,,//,图片加载后　　,,,img.onload =, function (), { 　　,,,,,var canvas =, document.querySelector (“# my-canvas"); 　　,,,,,var ctx =, canvas.getContext (“2 d"); 　　　　,,,,,//,根据形象大小,指定帆布大小　　,,,,,canvas.width =img.width 　　,,,,,canvas.height =img.height 　　　　,,,,,//,绘制图像　　,,,,,ctx.drawImage (img, 0, 0,, canvas.width,, canvas.height) 　　,,,} 　　,,} 　　& lt;/script>

如下图所示,图片被画入了画布:

使用帆布怎么实现一个滤镜功能”>, <强> 4实现滤镜</强> 这里我们主要借用<代码> getImageData </代码>函数,他返回每个像素的RGBA值。借助图像处理公式,操作像素进行相应的,数学运算即可。 <强> 4.1去色效果</强> 去色效果相当于就是老旧相机拍出来的黑白照片。人们根据人眼的敏感程度,给出了如下公式: <代码>灰色=红* 0.3 +绿* 0.59 +蓝* 0.11 <h2 class= 使用帆布怎么实现一个滤镜功能