大家有沒有從canvas里面畫過一些東西呢障陶，這和平常畫畫一樣滋恬，畫畫之前得有畫板啊還得有各種顏色的畫筆，
這個(gè)也一樣抱究，但是吧都得在js里面實(shí)現(xiàn)這些東西恢氯；下面就讓我來教大家來用js來畫一張隨機(jī)的柱狀圖吧！
//首先需要在body里面放一個(gè)名為canvas的盒子然后給這個(gè)盒子寫上樣式但是必須在行內(nèi)寫要不然不行！
<body>
<canvas id="c" width="800" height="800" style="margin-left: 200px; border: 1px red solid;"></canvas>
</body>
//接下來就是重點(diǎn)了
<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))//隨機(jī)數(shù)
}
var c= document.querySelector('#c');//獲取canvas
var ctx = c.getContext('2d');//給這個(gè)變成2d畫板并賦予名字
ctx.translate(50,700)//向下移動坐標(biāo)
//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++){
//把上面的數(shù)據(jù)畫入畫板
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)//高度數(shù)據(jù)的填入
ctx.fillText(data.x[i],70*(i+1),10)//月份寫入
}
//下面是給y軸寫出計(jì)量數(shù)勋拟，再給他畫上計(jì)量數(shù)的對應(yīng)點(diǎn)
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
但是有個(gè)小不足就是得自己刷新頁面才能從新獲取數(shù)據(jù)，但是可以在寫一個(gè)定時(shí)器用 setInterval 敢靡，然后用setTimeout在
三秒后讓他清除定時(shí)器clearInterval挂滓；就很舒適在設(shè)置兩個(gè)按鈕之類的就perfect了
