Canvas 魅力

H5里有两个透明的标签，一个是video，另一个就是canvas。
canvas的兼容性是IE9+，性能高。
它就相当于画布 路径就是选区。
画图的步骤就是：
1.获取画布
var oC = document.querySelector('#c1');
2.创建画笔
var gd = oC.getContext('2d');
3.起始点 连接点 -> 路径 //moveTo lineTo
4.closePath(可选) 闭合
5.描边/填充 stroke/fill
line 理论上可以画任何图形

    注意：
        1.先做好选区后填充描边
        2.先设置好画笔 后填充描边
        3.注意抬起画笔  gd.beginPath.

例子：
画矩形
gd.strokeRect(x,y,w,h);
gd.fillRect(x,y,w,h);
gd.clearRect(x,y,w,h);

    简易柱状图
        1.分析
            `strokeRect(x,y,w,h)`
            `fillRect`

        2.求最大值
        `var arr=[300,200,50,800,150,900];`
        `var iMax=Math.max.apply(null,arr);`

        3.高度
            循环创建 aHeight=[];
            `aHeight[i] = arr[i]/iMax*oC.height;`

        4.宽度
            `var w = oC.width/(aHeight.length*3-2);`
            `var iSpace = w*2;`

        5.`for(var i = 0;i<aHeight.length;i++){
              gd.fillStyle = '';
              gd.fillRect((w+iSpace)*i,oC.height - aHeight[i],w,aHeight[i]);
          }`

    简易画板
        事件  onmousedown  onmousemove  onmouseup
        `gd.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
        gd.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
        gd.stroke();`

    随机生成形状
        `var arr = []; -> [{x:100,y:200}，{x:300,y:400}，{}，{}，{}]
        arr[i] = {
            x:rnd(0,oC.width),
            y:rnd(0,oC.height)
        };
        gd.moveTo(arr[0].x,arr[0].y);
        for(var i = 1;i<arr.length;i++){
            gd.lineTo(arr[i].x,arr[i].y);
        }
        gd.closePath();
        gd.stroke();`