【前端】HTML5 利用canvas绘制柱状图

参考链接：https://www.cnblogs.com/linxin/p/6892389.html

参考书籍：《HTML5权威指南》

canvas元素所有功能体现在一个JavaScript对象上，该元素本身只有两个属性：height、width。

• 画坐标轴

1. ctx.beginPath() 开始一条新路径
2. ctx.lineWidth=1 线条宽度
3. ctx.strokeStyle="#000000" 线条颜色
4. cxt.moveTo(x,y) 移动到指定坐标而不绘制子路径 即线条起点
5. ctx.lineTo(x,y) 绘制一条到指定坐标的子路径 即线条终点
6. ctx.stroke() 给子路径描述的图形绘制轮廓线 即将起点和终点连成一条线

• 画坐标点

1. y轴上有多少坐标点由自己定义，需要获取到的数据的最大值来计算y轴上的坐标值。x轴的点则由传入的数据长度决定，坐标值由传入数据的xAxis属性决定。
2. ctx.fillText(value,x,y)填充文字，value为文字值，x y为值的坐标。
3. ctx.textAlign='center' 设置文字居中对齐
4. ctx.fillStyle='#000000' 设置文字填充颜色

• 柱状动画

1. 在canvas上通过setInterval、setTimeout和requestAnimationFrame实现动画。
2. 柱状即是画矩形，由ctx.fillRect(x,y,width,height)实现。

• 监听鼠标移动事件

当鼠标移上去，当前的柱状就变色，移开之后又变回原来的颜色。需要监听mouseover事件，当鼠标的位置位于柱状的面积内，触发事件。