canvas H5新增的元素，提供了强大的图形的绘制，变换，图片，视频的处理等等。需要使用JavaScript脚本操作
浏览器支持
大多数的现代浏览器都可以支持；IE8以下的浏览器不支持
画布 可支持设置宽高，默认宽高300 150
获取canvas元素
var mycanvas = document.getElementById("myCanvas");
获取绘制环境（相当于画笔）
var context = mycanvas.getContext("2d");
是自带的好h5对象，拥有多种绘制路径，矩形，圆形，文本等方法
绘制线
开始绘制
context.beginPath();
设置起点的坐标
moveTo(x,y)
设置样式(颜色，渐变或模式)
context.strokeStyle = "yellow";
设置填充颜色
context.fillStyle = "blue";
context.fill();
设置线条宽度
context.lineWidth = 5;
设置线条结束端 lineGap
设置拐角类型 lineJoin
context.lineCap = "round";
绘制
context.stroke();
绘制矩形
fillRect() 绘制填充的矩形
strokeRect() 绘制无填充的矩形
阴影颜色 shadowColor
阴影的模糊级别 shadowBlur
阴影的水平偏移量 shadowOffsetX
阴影的垂直偏移量 shadowOffsetY
绘制文字
strokeText() 绘制空心文本
fillText() 绘制实心文本
线性渐变
createLinearGradient(x0,y0,x1,y1)
x0,y0,x1,y1起始位置的坐标和结束位置的坐标
var linear = context.createLinearGradient(100, 350, 400, 450);
addColorStop()
参数1：对应颜色的位置，[0,1]
参数2：对应的颜色（字符串形式）
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "yellow");
linear.addColorStop(1, "blue");
context.fillStyle = linear;
context.fillRect(0, 350, 500, 25);
context.fillRect(0, 0, 500, 500);
径向渐变
context.createRadialGradient(x0,y0,r0,x1,y1,r1)
x0,y0,r0,x1,y1,r1径向渐变的起始位置和结束位置对应的坐标和渐变半径
var grad = context.createRadialGradient(150, 150, 50, 150, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(0.5, "yellow");
grad.addColorStop(1, "blue");
context.fillStyle = grad;
context.fillRect(0, 0, 300, 300);
图形变换
平移 旋转 缩放
translate() 平移 重置画布
平移操作只会影响后面图形的位置，是不会影响前面图形的
context.fillStyle = grad;
context.fillRect(300, 300, 100, 100);
context.translate(50, 50);
rotate()旋转
context.rotate(Math.PI / 4);
scale(w,h) 设置x方向和y方向的缩放比。大于1：放大，小于1：缩小
context.scale();
贝塞尔曲线
二次方贝塞尔曲线
context.quadraticCurveTo(cx,cy,x1,y1);
参数：cx,cy 二次方贝塞尔曲线的控制点坐标位置
x1,y1 结束点坐标位置
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(100, 100, 150, 20);
context.stroke();
三次方贝塞尔曲线
bezierCurveTo(cx1,cy1,cx2,cy2,x,y)
前四个参数：代表两个控制点的坐标位置
后两个参数：代表结束点的坐标位置