html canvas 画布

画布：

canvas

在页面上规划出一块空间，canvas标签，通过javascript控制画布完成绘制

1.获取画布

	var canvas=document.getElementById("");

2.获取上下文对象 （获取画笔）

	var cx=canvas.getContext("2d");

3.设置画笔样式

	cx.fillStyle='red';
	cx.strokeStyle='blue';

4.开始绘制

绘制图形：

1.矩形

fillRect(x,y,w,h);:实心填充元素
strokeRect(x,y,w,h);：描边
	x,y:当前矩形开始绘制的位置坐标
	w,h:当前矩形的宽高

2.绘制圆形

cx.beginPath();
cx.arc(x,y,r,begin,end,c);//设置圆
	x,y:圆的圆心坐标
	r：圆的半径
	begin，end：开始角度和结束角度；Math.PI=180 
				Math.PI/180=1度
	c：是否按照逆时针进行绘制
		true：按照逆时针
		false：顺时针
cx.closePath();


cx.fill();//实心填充
cx.stroke();//描边

3.绘制线段

moveTo(x,y):
	x,y:线段的起点坐标
lineTo(x,y)
	x,y:线段的终点坐标

cx.stroke();
//fill():不能使用

lineWidth=number;

4.绘制渐变图形

线性渐变：
	var g=createLinearGradient(bx,by,ex,ey):
		bx,by:渐变的开始位置坐标
		ex,ey:渐变结束位置的坐标

	g.addColorStop(offset,color);
		offset:0-1之间的偏移量
		color：设置的颜色值
		当前方法至少调用两次

	cx.fillStyle=g;
	//绘制图形

径向渐变：
	createRadialGradient(bx,by,br,ex,ey,er)
	bx,by:开始圆的圆心位置
	br:开始圆的半径
	ex,ey:结束圆的圆心位置
	er：结束圆的半径

5.变形

1.平移
	translate(x,y):
		x,y:将坐标原点平移单位
2.扩大
	scale(x,y):
		x:代表的是水平方向上的放大倍数
		y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）

	放大坐标

3.旋转
	rotate(angle):
		angle:旋转角度，旋转的中心点就是坐标轴的原点
			默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可
4.保存和回滚

	[save1,save2,save3]
	save():将当前的绘画状态进行保存并存入状态栈
	restore():该方法每次调用只会回滚到上一次save的状态

6.图形组合

globalCompositeOperation=type;
type:图形组合的方式
该属性一定要用在两个图形之间

type:string
	source-over:将新图形覆盖在原图形之上
	destination-over:在原图形之下绘制新图形

	source-in:新图形和原油图形做in计算，只显示新图形中和原油图形重叠的部分，其他部分均变为透明
	destination-in:新图形和原油图形做in计算，只显示原有图形中和新图形重叠的部分，其他部分均变为透明

	source-out:新图形和原油图形做out计算，只显示新图形中和原油图形不重叠的部分，其他部分均变为透明
	destination-out:新图形和原油图形做out计算，只显示原有图形中和新图形不重叠的部分，其他部分均变为透明


	source-atop:绘制新图形中与原有图形重叠部分并且保留原有图形未重叠部分；新图形其他部分变为透明
	destination-atop:绘制新图形中与原图形重叠部分并且保留新图形未重叠部分；原有图形其他部分变为透明

	lighter：
		原图形和新图形均进行绘制，重叠部分进行加色处理
	xor：
		绘制新图形和原图形不重叠部分，重叠部分变为透明
	copy：
		只绘制新图形，原图形中不与新图形重叠的部分变为透明

7.绘制文本

cx.font='16px blod';

fillText(str,x,y,px);
strokeText(str,x,y,px);
	str:绘制文本字符串
	x,y:文本的显示坐标
	px：可选参数，文本的最大的像素宽度