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透明的处理，其实就可以不用那么麻烦了
由此引出了图片的高斯模糊和滤镜效果：