大家有没有从canvas里面画过一些东西呢，这和平常画画一样，画画之前得有画板啊还得有各种颜色的画笔，
这个也一样，但是吧都得在js里面实现这些东西；下面就让我来教大家来用js来画一张随机的柱状图吧！
//首先需要在body里面放一个名为canvas的盒子然后给这个盒子写上样式但是必须在行内写要不然不行！
<body>
<canvas id="c" width="800" height="800" style="margin-left: 200px; border: 1px red solid;"></canvas>
</body>
//接下来就是重点了
<script>
data={
x:["一月","二月","三月","四月","五月","六月"],
y:["0","100","200","300","400","500","600","700","800","900","1000"],
val:[],
col:["red","green","blue","skyblue","limegreen","pink"]
}
while(data.val.length<6){
data.val.push(Math.floor(Math.random()*(500-100+1)+100))//随机数
}
var c= document.querySelector('#c');//获取canvas
var ctx = c.getContext('2d');//给这个变成2d画板并赋予名字
ctx.translate(50,700)//向下移动坐标
//y轴
ctx.beginPath()
ctx.moveTo(0,0);
ctx.lineTo(0,-600);
ctx.strokeStyle = 'red';
ctx.lineWidth = '1'
ctx.stroke()
//x轴
ctx.beginPath()
ctx.moveTo(0,0);
ctx.lineTo(600,0);
ctx.strokeStyle = 'red';
ctx.lineWidth = '1'
ctx.stroke();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
for(var i=0; i<data.val.length; i++){
//把上面的数据画入画板
ctx.beginPath()
ctx.moveTo(70*(i+1),0)
ctx.lineTo(70*(i+1),-data.val[i]/2)
ctx.strokeStyle = data.col[i]
ctx.lineWidth = '30';//加粗
ctx.stroke();
ctx.fillText(data.val[i],70*(i+1),-data.val[i]/2-10)//高度数据的填入
ctx.fillText(data.x[i],70*(i+1),10)//月份写入
}
//下面是给y轴写出计量数，再给他画上计量数的对应点
for(var i=0; i<data.y.length; i++){
ctx.beginPath()
ctx.moveTo(0,-50*i)
ctx.lineTo(-5,-50*i)
ctx.lineWidth = '2';
ctx.strokeStyle = 'black'
ctx.stroke();
ctx.fillText(data.y[i],-20,-50*i)
}
</script>
以上吧出来的效果可谓是惊人，如下图：
柱状图.png
但是有个小不足就是得自己刷新页面才能从新获取数据，但是可以在写一个定时器用 setInterval ，然后用setTimeout在
三秒后让他清除定时器clearInterval；就很舒适在设置两个按钮之类的就perfect了
