原生js实现折线图（canvas详解）

这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图，所以我就从canvas开始学习了。
首先给大家看一下通过学习，我最后完成的折线图：

内容：

1. x轴及平行刻度线
2. x轴、y轴坐标刻度
3. 折点的数据显示

缺点：

1. 线条样式的动态变换
2. y轴刻度算法
3. 一点都不酷炫！！！

一、Canvas介绍

前言：canvas元素本身并没有绘制能力的，它仅仅是图形的容器，而getContext()方法返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

1、画布的创建

//HTML部分
<canvas id="mycanvas"></canvas>

const canvas = document.getElementById("mycanvas");
const context = canvas.getContext("2d");

document.getElementById()：获取canvas容器标签
canvas.getContext(“2d”)：获取绘制对象

2、设置画布的宽高和背景色

//HTML部分
<canvas id="mycanvas"></canvas>

const canvas = document.getElementById("mycanvas");
canvas.width = 500;
canvas.height = 300;
const context = canvas.getContext("2d");
context.fillStyle = "rgb(93,111,194)";
context.fillRect(0,0,canvas.width,canvas.height);

canvas.width 设置画布的宽；
canvas.height 设置画布的高；
context.fillStyle 设置填充绘画的颜色、渐变或模式；（说白了就是把画笔染成什么颜色）
context.fillRect(x,y,width,height) 绘制“已填色”的矩形。默认的填充颜色是黑色;（用设置的颜色或者默认颜色画出图形）

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的宽度，以像素计

3、设置渐变色

3.1、线性渐变

//HTML部分
<canvas id="mycanvas"></canvas>

const canvas = document.getElementById("mycanvas");
canvas.width = 500;
canvas.height = 300;
const context = canvas.getContext("2d");
const gradient = context.createLinearGradient(0, 0, canvas.width,0);
gradient.addColorStop(0  ,"rgb(255,0,0)");
gradient.addColorStop(0.2,"rgb(255,165,0)");
gradient.addColorStop(0.3,"rgb(255,255,0)");
gradient.addColorStop(0.6,"rgb(0,255,0)");
gradient.addColorStop(0.7,"rgb(0,127,255)");
gradient.addColorStop(0.8,"rgb(0,0,255)");
gradient.addColorStop(1.0,"rgb(139,0,255)");
context.fillStyle = gradient;
context.fillRect(0,0,canvas.width,canvas.height);

createLinearGradient(x0,y0,x1,y1)：
(x0,y0)连接(x1,y1)方向上进行渐变
gradient.addColorStop(stop,color);

参数	描述
stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
color	在结束位置显示的 CSS 颜色值

3.2、放射状/圆形渐变