【带着canvas去流浪】（2）绘制折线图

示例代码托管在：https://github.com/dashnowords/blogs/tree/master/Demo/canvas-echarts/line-chart

博客园地址：《大史住在大前端》原创博文目录

华为云社区地址：【你要的前端打怪升级指南】

目录

• 一. 任务说明
• 二. 重点提示
• 三. 示例代码
  • 3.1 一般折线图
  • 3.2 用贝塞尔曲线绘制平滑折线图
• 四. 大数据量场景

一. 任务说明

使用原生canvasAPI绘制折线图。（柱状图截图来自于百度Echarts官方示例库【查看示例链接】。

二. 重点提示

一般折线图是比较好实现的，只需要调用最基本的moveTo()和lineTo( )方法来绘制即可。平滑折线图是一个难点，需要借助贝塞尔曲线来进行绘制，此时每段曲线的控制点算法就成了核心难点，对原理感兴趣的读者可以自行研究，本文直接利用算法的结论来进行实现。

上一节中为了以文字中点为参考，在绘制x轴文字时采用的方法是用measureText( )方法测量文字的宽度，然后偏移该距离的一半来达到效果，事实上我们可以通过设置textAlign属性为'center'来达到以文字宽度方向中线为参考点的绘制。

context.textAlign = 'center';
context.drawText('Hello world',x ,y);

三. 示例代码

坐标轴及绘图参数设置请直接参见【带着canvas去流浪】（1）绘制柱状图或在示例demo中查看。

3.1 一般折线图

折线图数据绘制示例代码：

/**
 * 绘制数据
 */
function drawData(options) {
    let data = options.data;//数据点坐标
    let xLength = (options.chartZone[2] - options.chartZone[0])*0.96;//线段尾部留白后x轴长
    let yLength = (options.chartZone[3] - options.chartZone[1])*0.98;//线段尾部留白后y轴长
    let gap = xLength / options.xAxisLabel.length;//x轴间隙
    //缓存从数据值到坐标距离的比例因子
    let yFactor =(options.chartZone[3] - options.chartZone[1]) *0.98  /  options.yMax
    let activeX =  0;//记录绘制过程中当前点的坐标
    let activeY =  0;//记录绘制过程中当前点的y坐标
    context.strokeStyle = options.barStyle.color || '#1abc9c'; //02BAD4
    context.strokeWidth = 2;
    context.beginPath();
    context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动至0,0坐标
    for(let i = 0; i < data.length; i++){
        activeX = options.chartZone[0] + (i + 1) * gap;
        activeY = options.chartZone[3] - data[i] * yFactor;
        context.lineTo(activeX, activeY);
     }
     context.stroke();
    }

浏览器中可查看效果：

3.2 用贝塞尔曲线绘制平滑折线图

一般折线图连接点部分非常生硬，更多的场景下我们更希望曲线相对平滑，这时候就需要用到贝塞尔曲线来进行绘制，关于控制点的确定可参考文章【怎样确定贝塞尔曲线的控制点】。