html5的canvas知识总结（7）clip、globalCompositeOperation、drawImage、toDataURL、getImageData、putImageData

复习知识：

beginPath() ：开启一个新的路径，在画直线的时候，需要开启一个新的路径，在上一个路径下，移动画笔位置

closePath()：闭合路径，在画图的时候，直接将未连接的图形，闭合连接

1. clip() 方法：从原始画布中剪切任意形状和尺寸

注意：clip()方法会将他上面代码所绘制的图形的区域裁剪，在裁剪区内的内容会显示，裁剪区之外的内容不会显示。

用beginPath()方法开启新的路径，新的路径同样会受到影响，因为新路径的理解是：在上一个路径下移动画笔。

而save()和restore()方法，入栈和出栈的方式，使裁剪区无法影响后续的图形绘制。

注意：clip()方法，只对 fill()或者stroke() 方法生效，不能使用fillRect、strokeRect等方法。

入栈和出栈：

2. 合成

globalCompositeOperation 属性：设置一个源（新的）图像绘制到目标（已有）的图像上。

值的样式：

 （1）新图在上

  原图区域                  重叠区域               除去原图区域       原图和新图区域（默认） 

（2）新图在下

原图区域                   重叠区域                除去新图区域         原图和新图重叠区域

（3）

重叠区域颜色混合      保留新图              重叠区域透明

注意：如果不设置globalCompositeOperation，那么将继承上面离他最近的globalCompositeOperation值

3. globalAlpha属性，图片透明度

会作用到后续的每个图片上，除非用save、restore；

4. drawImage() 方法在画布上绘制图像、画布或视频。

（1）在画布上定位图像：drawImage(img,x,y);

图片从canvas坐标的（-50, -50）的位置开始插入

（2）在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

图片从canvas画布的（0,0）插入，并设置（不是裁剪）了图片宽高：100 100，

注意：是将原始图片的宽高，设置为100,100；图片还是完整的。不是将原始图片裁剪100,100的大小。

（3）剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

从图片上（0,0）的位置，裁剪宽50高50的图片，然后放在canvas画布上，放在（0,0）的位置， 宽100高100的区域内。

 

5. canvas内容导出

toDataURL()：是canvas自身的方法，不是上下文对象的方法

注意：base64编码格式的图片链接，减少网络请求。但是base64格式代码过长，常用于离线提示的小图片。

受同源策略影响，在服务器下打开才能看到插入的链接是base64的图片，服务器内本文件请求自己的资源。

6. getImageData() 方法：获取画布上的像素数据；putImageData()方法： 将像素数据放回画布

这个两个方法受同源策略影响，需要在服务器中打开文件，进行请求数据操作。

通过得到画布上的像素数据，进行处理，再放回到画布上，就可以对画布上的内容进行处理改变。

（1）getImageData(x, y, w, h) 方法：获取画布上的像素数据

可以看出，ctx.getImageData(50,50, 50, 50)的值是一个ImageData对象，对象下有data对象，共50*50*4（rgba）10000数值。

此处的a范围：0-255，还有width 和 height属性

（2）putImageData()方法： 将像素数据放回画布

注意data对象的构造：如果是400个数据值，那么每组100个数据，分成4组；

把canvas一块区域的透明度变为170；

上面用到了一个简单的算法：根据data数据特性

特别注意：data是对象，上面图片的这种写法，是为了让用户更好的查看，

格式是：data[0],data[1],data[2],data[3],data[4],data[5],data[6],data[7],data[8],data[9]...

那么上面对canvas透明的处理，其实就可以不用那么麻烦了

由此引出了图片的高斯模糊和滤镜效果：