Canvas 画随机统计图

开始两步依旧不变：

        var canvas = document.querySelector('canvas');

        var ctx = canvas.getContext('2d');

先学习画矩形，然后再画随机统计图：

        先定义一个x,y坐标图形

        ctx.beginPath();

        ctx.moveTo(100,100);

        ctx.lineTo(100,400);

        ctx.lineTo(400,400);

        ctx.stroke();

        ctx.closePath();

        先画一个矩形

        fillStyle = color; 来为它后面的fillRect着色，不能为前面已经画过的着色

        ctx.fillStyle = 'green';

        画矩形的属性 fillRect(x,y,width,hieght);它是从上往下画的

        ctx.fillRect(140,200,20,200);

然后我们开始画随机统计图

      ctx.fillRect(120,200,20,200);

        ctx.fillRect(160,200,20,200);

        ctx.fillRect(200,200,20,200);

        ctx.fillRect(240,200,20,200);

        ctx.fillRect(280,200,20,200);

        ctx.fillRect(320,200,20,200);

        ctx.fillRect(360,200,20,200);

是不是觉得很重复，那么重复的事情我们可以用循环来做

        for(var i = 0;i < 7;i++){

                var hieght = Math.random()*280+10;

                ctx.fillRect(120+40*i,200,20,height);

        }

然后在循环里面添加一个随机数 因为最高高度是三百，随机不能超过300

然后因为矩形是从上往下画的，这时候就有一个bug，最高高度不变，会显得很low

要解决这个bug，只要获得x,y的底线，然后减去随机数就行了

  for(var i = 0;i < 7;i++){

                var hieght = Math.random()*280+10;

                ctx.fillRect(120+40*i,400-height,20,200);

        }

为了随机统计图更加完美，我们还可以添加一个随机颜色

  for(var i = 0;i < 7;i++){

                var hieght = Math.random()*280+10;

                ctx.fillStyle = '#'+parseInt(Math.random()*0xffffff).toString(16);

                ctx.fillRect(120+40*i,400-height,20,200);

        }