html5新标签
<![CDATA[
canvas
默认：宽300 高150，最好是在元素里面设置宽高，如<canvas id="canvas" width="400" height="300"></canvas> ,在style里面设置是不一样的
在行内设置的数值就是画布的大小，如果是在style里面设置的话是按照默认的宽高进行比例缩放的，那么画布里面的元素也会按照比例缩放，如画布的大小在style里面设置的是宽600，高300（是默认的两倍），那么画布里面画如果设置的宽高是100,100，就会按照比例变成200,200；
绘制环境：
getContext("2d")：目前支持2D的场景 //webgl:3D绘图，只有部分浏览器支持
绘制方块
fillRect(L,T,W,H):默认颜色是黑色
strokeRect(L,T,W,H):带边框的方块（默认是一像素的黑色边框，浏览器上一般会显示两个像素，是因为浏览器上绘图会先找到Left和top的地方，然后向左向右用0.5来做边框，但是剩下的0.5浏览器会自动填充显示，所以就会有2PX，可以用xxx.strokeRect(50.5,50.5,100,100);方法来解决）
设置绘图（先设置样式，然后绘制图形）
fillStyle:填充颜色（绘制canvas是有顺序的）
lineWidth：线宽度，是一个数值
strokeStyle：边线颜色
边界绘制
lineJoin：边界连接点样式（就是图形的顶点）--miter(默认),round(圆角),bevel(斜角)
lineCap：端点样式（是直线的端点）--butt(默认)，round(圆角)，square(高度多出为宽一半的值)
绘制路径（直线）
beginPath:开始绘制路径
closePath:结束绘制路径，并且起始点和终止点会进行连接
moveTo:移动到绘制的新目标点
lineTo:新的目标点
stroke:画线，默认黑色
fill:填充，默认黑色
rect矩形区域
clearRect:删除一个画布的矩形区域
save:保存路径
restore恢复路径
绘制圆
arc(x,y,半径，起始弧度，结束弧度，旋转方向)
--x,y：起始位置
--弧度和角度的关系：弧度=角度*Math.PI/180
--旋转方向：顺时针（默认:false）、逆时针（true）
绘制其他曲线
arcTo(x1,y1,x2,y2,r)
-第一组坐标，第二组坐标，半径
quadraticCurveTo(dx,dy,x1,y1)
-贝塞尔曲线：第一组控制点，第二组结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
-贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标
]]>