1.3-使用canvas绘制统计图

   var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 800;
        ctx.beginPath();
        ctx.moveTo(100, 100)
        ctx.lineTo(100, 400);
        ctx.lineTo(400, 400)
        ctx.stroke();
        ctx.closePath()
        ctx.beginPath();
        for (var i = 0; i < 10; i++) {
            var height = Math.random() * 280 + 10 //[10,290]
            ctx.fillRect(120 + 40 * i, 200, 20, height)
        }

1.首先我们画出坐标系之后，利用for循环画了9个数据块，要想让数据块之间有间隔，直接修改每个的x坐标即可，
要想有间隔，必须要使后一个x的坐标大于前一个x的坐标加数据块的宽度，然后**再加一个一个数据（间隔多大的数据）
简单的来说，假设每个数据块间隔为20，每个数据块的宽度也为20，
第一个数据块x坐标为120，则第二个就为160，
我在上面代码中每个间隔为40，

2.我们利用math内置对象创建了一个10~290的高度，想达到理想统计图的效果，但发现效果不佳，因为高度是从数据块的坐标向下延申
而每个数据块的高度我们都写死了，为200，

正确效果

需求：假设我们想让随着页面刷新，在数据块高度不断变化的同时，数据块的填充色也发生改变，需要如何操作？

   ctx.fillStyle = '#' + parseInt(Math.random() * 0xffffff).toString(16)  //生成一个随机16进制的颜色值

改进：假设需要让它变成像音乐旋律条那样不断变化该如何。
方法： 设置循环定时器，且注意每次执行的时候需要清除动画

  setInterval(function() {
            ctx.clearRect(0, 0, 600, 800)
            for (var i = 0; i < 8; i++) {
                ctx.fillStyle = '#' + parseInt(Math.random() * 0xffffff).toString(16)
                var height = Math.random() * 280 + 10 //[10,290]
                ctx.fillRect(120 + 40 * i, 400 - height, 20, height)
            }

        }, 400)