一，canvas
1，全局复合图形操作
ctx.globalCompositeOperation = type;
type用于设置新图形与原有图形的融合
type取值：
两种前缀：
以原图为准使用destination-
以新图为准使用source-
destination-over:原图覆盖新图
source-over:新图覆盖原图
destination-in:仅仅显示重叠部分，原图颜色；
source-in:仅仅显示重叠部分，新图颜色；
destination-out:仅仅显示不重叠部分，原图的
source-out:仅仅显示不重叠部分，新图的
destination-atop:重叠部分保留，原图覆盖新图，原图不重叠部分消失
source-atop:重叠部分保留，新图覆盖原图，新图不重叠部分消失
lighter:叠加部分做加色处理
darken:重叠部分做减色处理
xor:重叠部分变透明
copy:新图留下，其他消失
2,变形
画布中的变形都是ctx的变形，不是元素
3种：
1）ctx.translate(100,100)
坐标系平移，图形的坐标没有变，会跟随坐标系的移动而移动
2)ctx.rotate(1);//旋转1弧度
旋转弧度，（公转，绕着坐标原点旋转）
3)ctx.scale(1.5,2)//宽放大1.5倍，高2倍
缩放变形
3,绘制文本
fillText(txt,x,y,maxWidth);
strokeText(txt,x,y,maxWidth);
font = 'bold 20px 微软雅黑';
textAlign = 'left|center|right|start|end';
textBaseline = 'top|middle|bottom|Alphabetic|Hanging';
4,图像阴影
ctx.shadowColor = 'red';//阴影颜色
ctx.shadowBlur = 20;阴影模糊级别
ctx.shadowOffsetX=5;//设置阴影在X轴发那个像距离图形的距离
ctx.shadowOffsetY=5;//设置阴影在Y轴方向距离图像的距离
5,图片处理
平铺：createPattern(img,type);
img:图片
type:repeat
repeat-x|y
no-repeat
eg:
ctx.fillStyle = ctx.createPattern(img,'repeat-x');
ctx.fillRect(0,0,canvas.width,canvas.height);
图像裁剪：ctx.clip();
需要配合路径使用，先绘制好路径，然后调用clip
注：
一旦裁剪了某个区域，则之后的所有图形都被限制在这个区域，不能访问画布上的其他区域
像素处理：
getImageData(x,y,w,h);//可以指定获取指定区域内的像素点数据
x:x轴坐标
y:y轴坐标
w:指定区域的宽
h:指定区域的高
putImageData(imgData,x,y);//将获取的数据重新放回画布上
注：
必须服务器环境运行，不支持跨域
6，图像输出
这是一个canvas方法
canvas.toDataURL(type,args);
用来返回一个url地址，将canvas画布转为一张图片，这张图片是基于Base64编码的，如果不指定两个参数，无参调用该方法，转换的图像默认是png格式
type:图片格式 image/png,image/jpg....
args:如果type是image/jpeg,那么arges可以是0-1之间的值，表示指定的图像品质
注：
必须服务器环境运行，不支持跨域
7,transform()
添加一个新的变换矩阵
ctx.transform(a,b,c,d,e,f);
a,d 水平，垂直的缩放
b,c 水平，垂直倾斜
e,f 水平，垂直移动
注：
每当调用一次transform时，都会在前一个矩阵的基础上继续构造
8，setTransform()
重置并新建一个变形矩阵
ctx.setTransform(a,b,c,d,e,f);
9，save() & restore()
绘制复杂图形必不可少的方法，分别用来保存恢复ctx的状态
10，isPointInPath(x,y);
测试给定的坐标是否位于当前路径之内
返回值：true / false
注：
该方法仅仅对当前的路径有效
1，全局复合图形操作
ctx.globalCompositeOperation = type;
type用于设置新图形与原有图形的融合
type取值：
两种前缀：
以原图为准使用destination-
以新图为准使用source-
destination-over:原图覆盖新图
source-over:新图覆盖原图
destination-in:仅仅显示重叠部分，原图颜色；
source-in:仅仅显示重叠部分，新图颜色；
destination-out:仅仅显示不重叠部分，原图的
source-out:仅仅显示不重叠部分，新图的
destination-atop:重叠部分保留，原图覆盖新图，原图不重叠部分消失
source-atop:重叠部分保留，新图覆盖原图，新图不重叠部分消失
lighter:叠加部分做加色处理
darken:重叠部分做减色处理
xor:重叠部分变透明
copy:新图留下，其他消失
2,变形
画布中的变形都是ctx的变形，不是元素
3种：
1）ctx.translate(100,100)
坐标系平移，图形的坐标没有变，会跟随坐标系的移动而移动
2)ctx.rotate(1);//旋转1弧度
旋转弧度，（公转，绕着坐标原点旋转）
3)ctx.scale(1.5,2)//宽放大1.5倍，高2倍
缩放变形
3,绘制文本
fillText(txt,x,y,maxWidth);
strokeText(txt,x,y,maxWidth);
font = 'bold 20px 微软雅黑';
textAlign = 'left|center|right|start|end';
textBaseline = 'top|middle|bottom|Alphabetic|Hanging';
4,图像阴影
ctx.shadowColor = 'red';//阴影颜色
ctx.shadowBlur = 20;阴影模糊级别
ctx.shadowOffsetX=5;//设置阴影在X轴发那个像距离图形的距离
ctx.shadowOffsetY=5;//设置阴影在Y轴方向距离图像的距离
5,图片处理
平铺：createPattern(img,type);
img:图片
type:repeat
repeat-x|y
no-repeat
eg:
ctx.fillStyle = ctx.createPattern(img,'repeat-x');
ctx.fillRect(0,0,canvas.width,canvas.height);
图像裁剪：ctx.clip();
需要配合路径使用，先绘制好路径，然后调用clip
注：
一旦裁剪了某个区域，则之后的所有图形都被限制在这个区域，不能访问画布上的其他区域
像素处理：
getImageData(x,y,w,h);//可以指定获取指定区域内的像素点数据
x:x轴坐标
y:y轴坐标
w:指定区域的宽
h:指定区域的高
putImageData(imgData,x,y);//将获取的数据重新放回画布上
注：
必须服务器环境运行，不支持跨域
6，图像输出
这是一个canvas方法
canvas.toDataURL(type,args);
用来返回一个url地址，将canvas画布转为一张图片，这张图片是基于Base64编码的，如果不指定两个参数，无参调用该方法，转换的图像默认是png格式
type:图片格式 image/png,image/jpg....
args:如果type是image/jpeg,那么arges可以是0-1之间的值，表示指定的图像品质
注：
必须服务器环境运行，不支持跨域
7,transform()
添加一个新的变换矩阵
ctx.transform(a,b,c,d,e,f);
a,d 水平，垂直的缩放
b,c 水平，垂直倾斜
e,f 水平，垂直移动
注：
每当调用一次transform时，都会在前一个矩阵的基础上继续构造
8，setTransform()
重置并新建一个变形矩阵
ctx.setTransform(a,b,c,d,e,f);
9，save() & restore()
绘制复杂图形必不可少的方法，分别用来保存恢复ctx的状态
10，isPointInPath(x,y);
测试给定的坐标是否位于当前路径之内
返回值：true / false
注：
该方法仅仅对当前的路径有效