示例代码托管于：https://github.com/dashnowords/blogs/tree/master/Demo/canvas-echarts/line-chart博客园地址:《大史住在大前端》原博文目录华为云社区地址：【你要的前端打怪升级指南】1.任务描述使用原生canvasAPI绘制折线图。（直方图截图来自百度Echarts官方示例库【示例链接见）。2、需要特别提醒的是，一般折线图实现起来比较容易，只需要调用最基本的moveTo()和lineTo()方法来绘制。平滑折线图是一个难点，需要借助贝塞尔曲线来绘制。此时，每条曲线的控制点算法就成为核心难点。有兴趣的读者原理可以自己研究下，本文直接使用算法的结论来实现。。上一节为了以文字中点为参考，采用绘制x轴文字的方法就是用measureText()方法测量文字的宽度，然后偏移一半的距离来达到效果，其实我们可以通过设置textAlign属性为'center'来实现以文字的中心线绘制文字宽度方向为参考点。context.textAlign='center';context.drawText('Helloworld',x,y);3.示例代码坐标轴及绘制参数设置请直接参考【画布漫游】（1）绘制直方图或在示例demo中查看。3.1一般折线图折线图数据绘制示例代码：/***drawdata*/functiondrawData(options){letdata=options.data;//数据点坐标letxLength=(options.chartZone[2]-options.chartZone[0])*0.96;//线段尾部留空后x轴的长度letyLength=(options.chartZone[3]-options.chartZone[1])*0.98;//线段结束后y轴的长度留空letgap=xLength/options.xAxisLabel.length;//x轴gap//缓存数据值到坐标距离的比例因子letyFactor=(options.chartZone[3]-options.chartZone[1])*0.98/选项。yMaxletactiveX=0;//绘制时记录当前点的坐标letactiveY=0;//绘制时记录当前点的y坐标context.strokeStyle=options.barStyle.color||'#1abc9c';//02BAD4context.strokeWidth=2;context.beginPath();context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动到0,0坐标for(leti=0;i
