canvas基本标签
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #aaa">< /canvas>
宽高写在内部跟样式有区别的（样式设置-画出的图形宽高改变，内部设置-画出的图形宽高不变）
var cvs = document.getElementById("myCanvas");
IE 6 7 8不支持 <canvas>标签
每个画布都必须要有一个context（上下文）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：
var ctx = cvs.getContext("2d");
绘制
ctx.beginPath():开始一个路径。
ctx.moveTo(x,y):路径移到画布中的指定点，即起点。
ctx.lineTo(x,y):添加一个新点，画线。
ctx.closePath()：关闭绘制路径.
ctx.fillStyle:用来设置填充颜色。
ctx.fill()：填充已定义好的路径。
ctx.lineWidth：画线的宽度。
ctx.strokeStyle:用来设置描边颜色。
-
ctx.stroke():绘制已定义好的路径。
ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(300,100); ctx.lineTo(100,200); ctx.closePath(); ctx.strokeStyle = '#fc0'; ctx.lineWidth = 10; ctx.stroke(); ctx.rect(350, 100, 200, 100); ctx.stroke(); -
矩形的绘制 rect(x,y,w,h)
x,y为起始坐标，w、h为矩形的宽、高ctx.fillRect(x,y,w,h)及 ctx.strokeRect(x,y,w,h)
圆形的绘制 arc(x,y,r,sa,ea,true/false)
x,y为圆心坐标，r为半径，sa、ea分别为起始角度和结束角度，true是逆时针画圆，false是顺时针画圆；360度角即2PI弧度，1度就是2PI/360=PI/180弧度，90度就是2PI/360*90=PI/2弧度-
绘制文字
方法：
fillText(text,x,y,maxWidth):填充绘制
text表示文字 x,y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出strokeText(text,x,y,maxWidth):描边绘制
text表示文字 x,y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出。常用属性：
font文本内容的当前字体属性
示例：ctx.font = "bold 60px 微软雅黑"；(顺序不能改)
textAlign 文本内容的当前对齐方式(一般不需要)
示例：ctx.textAlign = "left"; ctx.textAlign ="right";
textBaseline绘制文本时使用的当前文本基线
示例：ctx.textBaseline = "middle"; ctx.textBaseline = "top"; ctx.textBaseline="bottom"; 图形的组合方式
globalCompositeOperation属性，控制图形的组合方式，这个属性归getContext('2d')所创建的对象所有
globalCompositeOperation="type";
type的值：
* source-over(默认值)，表示新图覆盖在旧图之上
* source-in ：只绘制新图的重叠部分，其他透明
* source-out ：只绘制新图，重叠部分和旧图透明
* source-atop ： 只绘制旧图和重叠的部分，其他透明
* destination-over ： 表示旧图覆盖在新图之上
* destination-in ： 值绘制旧图的重叠部分，其他透明
* destination-out ： 只绘制旧图，重叠部分和新图透明
* destination-atop ： 只绘制新图和重叠部分，其他透明
* lighter：旧图与新图都绘制，重叠部分混色处理
* xor ： 旧图和新图重叠处做透明处理
* copy ： 只绘制新图形，不绘制旧图形。
图形的阴影。
阴影属性：
shadowCOlor：设置阴影颜色。
shadowBlur：设置阴影模糊级别。
shadowOffsetX：设置阴影在x轴上距离图形的距离
-
shadowOffsetY：设置阴影在y轴上距离图形的距离
ctx.shadowColor="red";
ctx.shadowBlur=20;
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
图像的处理
-
绘制图像
- drawImage(img,x,y)
x:图片横坐标的起始值 y：图片纵坐标的起始值 - drawImage(img,x,y,w,h)
w：在画布中图片显示的宽度 h：在画布中图片显示的高度 - drawImage(img,x,y,w,h,rx,ry,rw,rh)
rx、ry：显示在画布中的坐标 rw、rh：显示在画布中的宽、高
- drawImage(img,x,y)
图像在画布中的平铺
createPattern(img,type)
type:repeat整个画布平铺
repeat-x/y在x/y轴方向上平铺
no-repeat不平铺图像的裁剪(配合路径使用)
clip（）配合路径使用，先绘制好路径，然后调用clip方法
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）像素处理
getImageData(x,y,w,h)：可以获取指定区域内的像素点的数据；
putImageData(imgData,x,y);getImageData返回的像素数据点imgData填充到画布上面，从x、y点开始填充；图像的输出
canvas.toDataURL( type , args ):
为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式 。
•type:图像格式，image/png image/jpeg等
•args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。-
其他方法
scale(w,h) 缩放当前绘图:
w: 缩放绘图的宽度 h: 缩放绘图的高度
rotate(angle) 旋转当前绘图的坐标轴
1°等于Math.PI/180 5°=5*Math.PI/180
translate(x,y) 重新映射画布上的 (0,0) 位置save()、restore():
绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数 清除画布
ctx.clearRect(x,y,width,height):
x : 清除起点横坐标
y : 清除起点纵坐标
width : 清除长度
height : 清除高度
canvas学习：http://blog.csdn.net/clh604/article/details/8536059
