上期带大家学习了canvas绘画的基础知识，今天我们就用canvas里的知识画一张柱状图吧，正所谓学的知识都要活学活用的。
//创建画布的样式
<style>
* {
margin: 0;
padding: 0;
}
#mycanvas {
margin-left: 200px;
border: 1px solid red;
}
</style>
//在body里创建一个画布
<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']
}//柱状统计图要写入的数据
//xy的统计框架
//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) //数据的对应
}
</script>
