前言canvas强大的功能使其成为HTML5中非常重要的组成部分。至于是什么，这里就不用介绍了。可视化图表是canvas强大功能的体现之一。现在有很多成熟的图表插件是用canvas实现的。Chart.js、ECharts等可以制作漂亮炫酷的图表，几乎涵盖了所有图表的实现。有时候只想画直方图，自己写起来又觉得麻烦，用别人的插件又觉得麻烦。最后打开百度，复制一段代码，粘贴修改。不妨自己拿一个。效果动画效果图无法显示，可以在底部找demo地址进行分析。该图表由xy轴、数据条和标题组成。坐标轴：可以用moveTo()&lineTo()来实现文字：可以用fillText()来实现矩形：可以用fillRect()看起来似乎并不太难。实现定义画布canvas标签只是一个容器，JavaScript才是真正绘制的。绘制坐标轴坐标轴就是两条水平线，这是canvas最基础的知识。使用ctx.beginPath()开始一条新路径ctx.lineWidth=1设置线宽ctx.strokeStyle='#000000'设置线颜色ctx.moveTo(x,y)定义线的起点ctx.lineTo(x1,y1)定义直线的终点，最后ctx.stroke()将起点和终点连成一条直线varcanvas=document.getElementById('canvas');varctx=canvas.getContext('2d');varwidth=canvas.width;varheight=canvas.height;varpadding=50;//坐标轴到画布框的边距，留边距写文字ctx.beginPath();ctx.lineWidth=1;//y轴ctx.moveTo(padding+0.5,height-padding+0.5);ctx.lineTo(填充+0.5,填充+0.5);ctx.stroke();//x轴ctx.moveTo(padding+0.5,height-padding+0.5);ctx.lineTo(宽度-填充+0.5,高度-填充+0.5);ctx.stroke();绘制坐标点的y轴坐标点个数是自己定义的，需要取数据的最大值来计算y轴坐标值。x轴的点由传入数据的长度决定，坐标值由传入数据的xAxis属性决定。坐标值为文本，文本通过ctx.fillText(value,x,y)填充。value是文本值，xy是值的坐标。填充颜??色varyNumber=5;//y轴的段数varyLength=Math.floor((height-padding*2)/yNumber);//y轴每段实际长度varxLength=Math.floor((width-padding*2)/data.length);//x轴各段实际长度ctx.beginPath();ctx.textAlign='center';ctx.fillStyle='#000000';ctx.strokeStyle='#000000';//x轴(vari=0;i100?100:(当前+3);绘制动画（）；}else{窗口。cancelAnimationFrame（循环）；循环=空；}}functiondrawAnimation(){for(vari=0;i=40){ctx.fillText(title,width/2,height-5)}else{ctx.fillText(title,width/2,padding/2)}}监听鼠标移动事件，我们可以看到在某些图表中，当鼠标向上移动时，当前列会发生变化色，离开后又变回原来的颜色。这里需要监听mouseover事件，当鼠标的位置在列的区域内时，触发该事件。那我怎么知道是在列中呢，我发现在drawAnimation()里面会有每一列的坐标，所以我就干脆把坐标保存在data.那么鼠标在列中的条件应该是：ev.offsetX>data[i].leftev.offsetXdata[i].topev.offsetYdata[i].left&&ev.offsetXdata[i].top&&ev.offsetY
