H5引入了canvas标签，默认是一个300*150的inline-block。canvas的宽高只能用它自身的width和height属性来指定，而不能使用css样式中的width、height。
一、获得‘画笔’对象，canvas所有的任务都需要它来执行
var ctx=canvas.getContext('2d');
二、一些canvas常用的属性
fillStyle：填充样式
strokeStyle：描边样式
lineWidth：描边宽度
font：绘制文本所用的字体大小和类型
textBaseline：文本对其的基线
shadowOffsetX、shadowOffsetY：阴影偏移量
三、使用canvas绘制图形
1、绘制矩形
ctx.fillRect(x,y,w,h)：填充一个矩形
ctx.strokeRect(x,y,w,h)：描边一个矩形
ctx.clearRect(x,y,w,h)：清除一个矩形范围内的内容
2、绘制文本
ctx.fillText(txt,x,y)填充文本
ctx.strokeText(txt,x,y)描边文本
ctx.measureText(txt)测量
*要注意的是文本的定位点默认在文本基线(alphabetic)的起始点！
3、为图形文字添加阴影
例：ctx.shadowColor='#000';//颜色
ctx.shadowOffsetX=8;//水平偏移量
ctx.shadowOffsetY=8;//垂直偏移量
ctx.shadowBlur=10;//模糊半径
4、在绘图时使用渐变色
ctx.createLinearGradient(x1,y1,x2,y2)：创建线性渐变对象
ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)：创建径向渐变对象
ctx.addColorStop：添加颜色点
5、绘制路径
ctx.beginPath()：开始路径
ctx.closePath()：结束路径
ctx.moveTo(x,y)：移动到指定点
ctx.lineTo(x,y)：绘制直线路径到指定点
ctx.arc()：绘制拱形路径
ctx.ellipse()：绘制椭圆路径
ctx.bezierCurveTo()：绘制贝塞尔曲线路径
ctx.linJoin()：修改折线拐点处样式
6、绘制图像
ctx.drawImage()
7、对于绘制上下文状态的改变和修改
ctx.translate(x,y)：坐标轴原点移动到指定点
ctx.rotate()：旋转画笔
ctx.scale()：画笔缩放
ctx.save()：保存绘图上下文当前的变形数据
ctx.restore()：恢复最近一次的保存的变形相关的状态
***Canvas是个纯js实现的绘制位图的技术。