这篇文章的起源就是之前用的都是ECharts突然有一天想自己用js手写一个折线图,所以我就从canvas开始学习了。
首先给大家看一下通过学习,我最后完成的折线图:
内容:
- x轴及平行刻度线
- x轴、y轴坐标刻度
- 折点的数据显示
缺点:
- 线条样式的动态变换
- y轴刻度算法
- 一点都不酷炫!!!
一、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);