canvas

canvas简介

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任

注：IE8及以下版本都不支持

canvas入门使用

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>
创建一个固定宽高的画布

JavaScript

<script type="text/javascript">
var c=document.getElementById("myCanvas");		//1、获取画布标签元素对象 (必须)
var cxt=c.getContext("2d");			            //2、创建2d画笔 (必须)
cxt.fillStyle="#FF0000";		                //3、设置图形填充色（默认黑色）
cxt.fillRect(0,0,150,75);	                    //4、绘制特定顶点的矩形
</script>

注：上面绘制矩形的方法所设置参数为顶点座标，参考点为画布的左上角顶点

canvasAPI

属性方法简介参考 W3C

注意点

	---canvas图像的渲染有别于html图像的渲染，
			canvas的渲染极快，不会出现代码覆盖后延迟渲染的问题
			写canvas代码一定要具有同步思想
	---在获取上下文时，一定要先判断
	---画布高宽的问题
		画布默认高宽300*150
		切记一定要使用html的attribute的形式来定义画布的宽高
		通过css形式定义会缩放画布内的图像
	---绘制矩形的问题
		a.边框宽度的问题，边框宽度是在偏移量上下分别渲染一半，可能会出现小数边框，
			一旦出现小数边框都会向上取整
		b.canvas的api只支持一种图像的直接渲染：矩形
	---我们没法使用选择器来选到canvas中的图像

画布api

	oc.getContext("2d");	//获取画笔
	oc.width			        	//设置画布宽度
	oc.height	                    //设置画布高度

上下文api

	ctx.fillRect(x,y,w,h):填充矩形
	ctx.strokeRect(x,ymwmh):带边框的矩形
	ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
		注意原点的位置
	ctx.fillStyle
	ctx.strokeStyle
	ctx.lineWidth
	ctx.lineCap
	ctx.lineJoin
	ctx.moveTo(x,y):将画笔擡起点到x，y处
	ctx.lineTo(x,y):将画笔移到x，y处
	ctx.rect(x,y,w,h)
	ctx.arc(x,y,r,degS,degE,dir)
	ctx.arcTo(x1,y1,x2,y2,r):2个座标，一个半径
			结合moveTo(x,y)方法使用，
			x,y:起始点
			x1,y1：控制点
			x2,y2：结束点
	ctx.quadraticCurveTo(x1,y1,x2,y2)
			结合moveTo(x,y)方法使用，
			x,y:起始点
			x1,y1：控制点
			x2,y2：结束点
			必须经过起点和终点
	ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
			结合moveTo(x,y)方法使用，
			x,y:起始点
			x1,y1：控制点
			x2,y2：控制点
			x3，y3：结束点
			必须经过起点和终点
	ctx.fill()
	ctx.stroke()
	
	ctx.beginpath():清除路径容器
	ctx.closepath():闭合路径
		fill自动闭合
		stroke需要手动闭合
	ctx.save()
		将画布当前状态(样式相关 变换相关)压入到样式栈中
	ctx.restore()
		将样式栈中栈顶的元素弹到样式容器中
		图像最终渲染依赖于样式容器
		
	ctx.translate(x,y):将原点按当前座标轴位移x，y个单位
	ctx.rotate(弧度):将座标轴按顺时针方向进行旋转
	ctx.scale(因子):
		放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
				画布中图像所包含的css像素的个数不变
		缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
				画布中图像所包含的css像素的个数不变

save() 与 restore()、beginPath()
以上三个方法称为canvas画图三件套