canvas画函数,canvas 入门
在这个数码产品泛滥的时代，拍照已经成为生活中不可或缺的一部分。不管是在家，还是郊游，还是长途旅行，总会拍出一些很美的照片。但是相机直接拍出来的照片往往和我们的心理预期有一定差距，那么如何缩小这种差距呢？答案是美颜p图，于是各种美颜相机涌入，p图成了随身技能。
所谓的美颜，其实只是很多滤镜的组合，滤镜通过一定的算法对画面像素进行操作，得到一些特殊的图像效果。用过Photoshop的朋友都知道ps里面有很多滤镜。下面我们就用js的canvas技术来实现几种滤镜效果。
最近学习了HTML5的重头戏——canvas。有了canvas，前端人员可以轻松处理图像。有很多API。这次主要学习常用的API，完成以下两段代码：
实现脱色滤镜实现负色(反色)滤镜1 了解 canvas？
1.1 什么是 canvas？
这个HTML元素是为客户端矢量图形设计的。它没有自己的行为，但是它向客户端JavaScript显示了一个绘图API，以便脚本可以在画布上绘制它想要的任何东西。
1.2 canvas 和 svg、vml 的区别？
canvas标记与SVG和VML的一个重要区别是，canvas有一个基于JavaScript的绘图API，而SVG和VML使用XML文档来描述绘图。
2 canvas 绘图学习
大多数canvas绘图API不是在canvas元素本身上定义的，而是在Canvas的getContext()方法获得的一个“绘图环境”对象上定义的。画布元素的默认宽度和高度分别是300像素和150像素。
2.1 canvas 绘制矩形
//处理画布元素var c=document . query selector( # my-canvas )；c .宽度=150；c.height=70//获取指定画布标签上的上下文对象var CTX=c . Get context( 2d )；CTX . fill style= # ff 0000 ；//color ctx.fillRect(0，0，150，75)；//形状2.2 canvas 绘制路径
var c=document . query selector( # my-canvas )；var CTX=c . get context( 2d )；ctx.moveTo(0，0)；//起始坐标ctx.lineTo(200，100)；//结束坐标CTX . stroke()；//立即抽取2.3 canvas 绘制圆形
对于接口ctx.arc()，五个参数分别是：(x，y，r，start，stop)。其中x和y是圆心的坐标，r是半径。
起止单位为弧度制。不是长度，不是程度。
var c=document . query selector( # my-canvas )；var CTX=c . get context( 2d )；CTX . begin path()；ctx.arc(95，50，40，0，2 *数学。PI)；CTX . stroke()；2.4 canvas 绘制文字
var c=document . getelementbyid( my canvas )；var CTX=c . get context( 2d )；ctx.font= 30px Arialctx.fillText(Hello World ，10，50)；3 canvas 图像处理学习
3.1 常用 API 接口
图像处理有四个主要的API:
Draw image: 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])
导出图像：toda aurl([类型，编码器选项])
更详细的API和参数描述，请参见：画布图像处理API参数说明。
3.2 绘制图像
基于这些API，我们可以在画布元素中绘制我们的图片。假设我们的图片是。/img/photo.jpg。
script window . onload=function(){ var img=new image()//声明一个新的图像对象img.src=。/img/photo.jpg //图片加载后，img . onload=function(){ var canvas=document . query selector( # my-canvas )；var CTX=canvas . get context( 2d )；//根据图片大小指定画布大小canvas.width=img . width canvas . height=img.height//Draw图片CTX.drawimage (img，0，0，canvas . width，canvas.height)}}/script如下图所示，图片被绘制到画布中：
4 实现滤镜
这里我们主要借用getImageData函数，它返回每个像素的RGBA值。借助于图像处理公式，只需要对像素进行运算，就可以进行相应的数学运算。
4.1 去色效果
去色效果相当于就是老旧相机拍出来的黑白照片。人们根据人眼的敏感程度，给出了如下公式：
灰色=红色* 0.3绿色* 0.59蓝色* 0.11
代码如下：
脚本窗口。onload=function(){ var img=new Image()img。src= ./img/photo。jpg img。onload=function(){ var canvas=document。查询选择器( # my-canvas )；var CTX=画布。获取上下文(“2d”)；canvas.width=img画布宽度。身高=img。身高CTX。绘制图像(img，0，0，canvas。width，canvas.height) //开始滤镜处理var imgData=ctx.getImageData(0，0，canvas.width，canvas。身高)；for(var I=0；I img数据。数据。长度/4；i) { var red=imgData.data[i * 4]，green=imgData.data[i * 4 1]，blue=img data。数据[I * 4 2]；定义变量灰色=0.3 *红色0.59 *绿色0.11 *蓝色；//计算灰色//刷新RGB，注意：//imgData.data[i * 4 3]存放的是阿尔法，不需要改动img数据。data[I * 4]=gray；img数据。data[I * 4 1]=gray；img数据。data[I * 4 ^ 2]=gray；} ctx.putImageData(imgData，0，0)；//重写图像数据} }/脚本效果如下图所示：
4.2 负色效果
负色效果就是用最大值减去当前值。而getImageData获得的RGB中的数值理论最大值是：255。所以，公式如下：
新值=255 -值
代码如下：
脚本窗口。onload=function(){ var img=new Image()img。src= ./img/photo。jpg img。onload=function(){ var canvas=document。查询选择器( # my-canvas )；var CTX=画布。获取上下文(“2d”)；canvas.width=img画布宽度。身高=img。身高CTX。绘制图像(img，0，0，canvas。width，canvas.height) //开始滤镜处理var imgData=ctx.getImageData(0，0，canvas.width，canvas。身高)；for(var I=0；I img数据。数据。长度/4；i) { var red=imgData.data[i * 4]，green=imgData.data[i * 4 1]，blue=img data。数据[I * 4 2]；//刷新RGB，注意：//imgData.data[i * 4 3]存放的是阿尔法，不需要改动img数据。数据[I * 4]=255-img数据。数据[I * 4]；img数据。data[I * 4 1]=255-img数据。数据[I * 4 1]；img数据。数据[I * 4 ^ 2]=255-img数据。数据[I * 4 2]；} ctx.putImageData(imgData，0，0)；//重写图像数据} }/脚本效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。