-->图形组合方式
   十一种图形组合效果
-->图像的处理
   绘制、保存、恢复、输出、交互

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
一、图形组合方式
图形组合：
新画图形是压在原图形上或者原图覆盖新图形等等一系列新图与原图形的结合方式叫做图形的组合，大概分为十一种方式。
比如：显示新图覆盖原图、或者只显示原图和新图相重叠部分等等。

globalCompositeOperation属性  控制图形的组合方式

这个属性归getContext(‘2d’)所创建的对象所有
globalCompositeOperation="type";
type的值：
source-over：默认值，表示新图覆盖在旧图之上
source-atop：只绘制旧图和重叠的部分，其他透明
source-in：只绘制新图的重叠部分，其他透明
source-out：只绘制新图，重叠部分和旧图透明
destination-over：表示旧图覆盖在新图之上
destination-atop：只绘制新图和重叠的部分，其他透明
destination-in：只绘制旧图的重叠部分，其他透明
destination-out：只绘制旧图，重叠部分和新图透明
lighter：旧图与新图都绘制，重叠部分混色处理
xor：旧图和新图重叠处做透明处理

copy：只绘制新图形，不绘制旧图形

	
	亲，别再用古董浏览器了
	！

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、图像的处理

 1、绘制图像

    绘制图像：把图片绘制在画布上面
    drawImage(img,x,y)
    img：图片
    x：图片横坐标的起始值
    y：图片纵坐标的起始值

    绘制固定宽高的图像：
    drawImage(img,x,y,w,h)
    img：图片
    x：图片横坐标的起始值
    y：图片纵坐标的起始值
    w：在画布中图片显示的宽度
    h：在画布中图片显示的高度

    剪切图像，在画布上定位被剪切部分：
    drawImage(img,x,y,w,h,rx,ry,rw,rh)
    img：图片
    x、y：源图片的坐标
    w、h：在源图片上裁剪的宽、高--
    rx、ry：显示在画布中的坐标
    rw、rh：显示在画布中的宽、高

	
	亲，别再用古董浏览器了
	！

 2、图像在画布中的平铺
    createPattern(img,type)
    img：图片
    type：repeat整个画布平铺
               repeat-x/y在x/y轴方向上平铺
               no-repeat不平铺

	亲，别再用古董浏览器了
	！

 3、图像的裁剪(配合路径使用)
    clip()
配合路径使用，先绘制好路径，
    然后调用clip方法；

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。

	亲，别再用古董浏览器了
	！

 4、像素处理
   getImageData(x,y,w,h)：可以获取指定区域内
    的像素点的数据；
    x:canvas的x轴坐标    y:canvas的y轴坐标
    w:指定区域的宽度       h:指定区域的高度
    putImageData(imgdata,x,y)：getImageData
    返回的像素数据点imgdata填充到画布上面，从
    x、y点开始填充；
PS: 服务器环境运行，不支持跨域

	亲，别再用古董浏览器了
	！

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

5、图像的输出

canvas.toDataURL( type , args ):
为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式默认为png格式 。
type:图像格式，image/png  image/jpeg等
args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。
PS: 服务器环境运行，不支持跨域

	亲，别再用古董浏览器了
	！
	
	

6、其他方法
scale(w,h) 缩放当前绘图:
w: 缩放绘图的宽度   h: 缩放绘图的高度
rotate(angle) 旋转当前绘图
1°等于Math.PI/180    5°=5*Math.PI/180

translate(x,y) 重新映射画布上的 (0,0) 位置

	亲，别再用古董浏览器了
	！

7、save和restore方法
save()、restore():
绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数；

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三、canvas交互


 isPointInPath(x , y)方法 
    测试给定的坐标点是否位于当前路径之内  
    返回 true 或 false
    x : canvas的x轴坐标
    y : canvas的y轴坐标
    示例：
    if (ctx.isPointInPath(x , y)) { };
PS: isPointInPath方法只对当前路径有效

彩蛋：用图形组合写刮刮乐效果：

	
谢谢惠顾!
	亲，别再用古董浏览器了
	！