上期帶大家學(xué)習(xí)了canvas繪畫的基礎(chǔ)知識，今天我們就用canvas里的知識畫一張柱狀圖吧玉掸，正所謂學(xué)的知識都要活學(xué)活用的。
//創(chuàng)建畫布的樣式
<style>
* {
margin: 0;
padding: 0;
}
#mycanvas {
margin-left: 200px;
border: 1px solid red;
}
</style>
//在body里創(chuàng)建一個畫布
<body>
<canvas id="mycanvas" width='800' height='700'>
</canvas>
</body>
<script>
var c = document.getElementById('mycanvas');//獲取畫布
var stx = c.getContext('2d');//可以通過這個對象在畫布上畫畫登疗。
var data = {
x: ['一月', '二月', '三月', '四月', '五月', '六月'],
y: ['0', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'],
val: ['300', '210', '120', '560', '800', '660'],
col: ['red', 'green', 'blue', 'skyblue', 'black', 'pink']
}//柱狀統(tǒng)計圖要寫入的數(shù)據(jù)
//xy的統(tǒng)計框架
//x
stx.translate(80, 600);
stx.beginPath();//開辟新路徑
stx.moveTo(0, 0);//x的起始點
stx.lineTo(500, 0);//路徑
stx.strokeStyle = 'blue';//描邊的顏色
stx.stroke();//描邊
stx.closePath()//閉合路徑
//y
stx.beginPath();
stx.moveTo(0, 0);
stx.lineTo(0, -600);
stx.strokeStyle = 'blue';
stx.stroke();
stx.closePath();
stx.textBaseline = 'middle';//垂直居中
for (var j in data.y) {
stx.beginPath();
stx.fillText(data.y[j], -30, -j * 50);
stx.moveTo(0, -j * 50);
stx.lineTo(-5, -j * 50);
stx.stroke();
stx.closePath()
}
stx.textAlign='center';//水平居中
for(var i=0;i<data.val.length;i++){
stx.beginPath();
stx.moveTo((i+1)*60,0);
stx.lineTo((i+1)*60,-data.val[i]/2);
stx.lineWidth=40; //
stx.strokeStyle=data.col[i];
stx.stroke();
stx.closePath();
stx.beginPath();
stx.fillText(data.x[i],(i+1)*60,10); //月份的寫入
stx.fillText(data.val[i],(i+1)*60,-data.val[i]/2-10) //數(shù)據(jù)的對應(yīng)
}
</script>
