canvas基本使用[数据可视化/绘制线段/矩形/圆/清除画布/绘制文字/柱状图]

sweethhheart

已于 2023-07-20 14:31:00 修改

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： javascript 数据可视化前端

于 2023-02-04 18:10:41 首次发布

本文链接：https://blog.csdn.net/heartqian/article/details/128842237

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

canvas简介

一些数据可视化框架的底层都用到了canvas。canvas是html5的新特性，允许我们使用canvas在网页中通过js绘制图像。

canvas标签只是一个图形容器（具有默认大小300*150），相当于一个画布，canvas本身是没有绘图能力的，绘图工作是在js内部完成。
也就是说，js相当于画笔，而canvas是画布。

注：1、在浏览器中，canvas标签就是一张图片。
2、在给canvas标签添加文本内容也不显示，因为操作canvas（比如绘制图像/文字）的方法只能通过js完成。
3、不能通过css样式设置画布的宽高，只能在标签内部通过width与height属性设置canvas的宽高。

canvas的基本使用

<body>
    <!-- canvas画布 具有默认的长与宽 300*150-->
    <canvas width="600px" height="300px"></canvas>
</body>

获取canvas节点

let canvas = document.querySelector('canvas');

获取画笔（上下文）

//通过canvas的getcontext方法获取画笔
let ctx = canvas.getContext('2d');

ctx画笔提供了很多属性与方法绘制图形：
在这里插入图片描述
canvas画布有自己的坐标系，左上角是原点，向右是x正方向，向下是y正方向。

绘制线段

moveTo() 设置线段起点。
lineTo() 设置其他点。起点只有一个，而其他点可以有多个。
stroke() 用于绘制线条。不调用这个方法看不到线段。
closePath 将起点与终点连接在一起。
这里展示绘制一个三角形：

let canvas = document.querySelector('canvas');
//通过canvas的getcontext方法获取画笔
let ctx = canvas.getContext('2d');
// console.log(ctx);
//绘制线段:设置线段起点
ctx.moveTo(100,100);
//其他点的设置
ctx.lineTo(100,200);
ctx.lineTo(300,100);
ctx.closePath();
//设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
//stroke方法绘制线条
ctx.stroke();

设置线段颜色，添加如下代码：

//设置线段颜色
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = '20';       //线段宽度

效果
在这里插入图片描述

绘制矩形

有两种方法：

没有填充颜色。使用strokeRect 方法。
有填充颜色。使用fillRect方法。（这里注意更换颜色要写在绘制图形之前）

let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    //绘制矩形第一种方式 无填充颜色的矩形
    //第一个参数 x 矩形距离canvas左边界的距离
    //第二个参数y 矩形距离canvas上边界的距离
    //第三个参数是矩形的宽 第四个参数是矩形的高
    ctx.strokeRect(100,100,100,200);
    //第二种方式 带有填充颜色的矩形
    //可以更换填充的颜色
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    //更换颜色要写在绘制图形之前
    ctx.fillRect(200,200,100,200);

实现效果：
在这里插入图片描述

绘制圆

绘制圆形之前调用beginPath方法。
通过arc方法绘制圆形。
注：1、arc方法有六个参数：x,y,r,起始弧度，结束弧度（如果绘制整个圆，这个值就是2PI），是否逆时针绘制。
2、也可以使用fillStyle 方法填充圆的颜色。
3、绘制圆形之后调用stroke方法
4、绘制第二个圆的时候，要重新调用beginPath 方法。

let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    //绘制圆形
    //开始绘制
    ctx.beginPath();
    //绘制圆形 x,y,r,起始弧度,结束弧度2pai,是否逆时针绘制
    ctx.arc(100,100,50,0,2*Math.PI,true);
    //填充颜色
    ctx.fillStyle = 'red';
    ctx.fill();
    //绘制第二个圆 顺时针绘制
    ctx.beginPath();
    ctx.arc(200,200,30,0,1,false);
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    ctx.stroke();

实现效果：
在这里插入图片描述

清除画布与绘制文字

清除画布clearRect方法。
绘制文字fillText方法。

let canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');
    //绘制矩形
    ctx.fillRect(100,200,100,200);
    //清除画布 x,y,w,h
    ctx.clearRect(0,0,600,400);
    //设置文字大小
    ctx.font = "20px 微软雅黑";
    ctx.fillStyle = 'red';
    //绘制文字
    ctx.fillText('数据可视化',50,20)

清除前：
在这里插入图片描述
清除后：（清除600*400区域，然后绘制文字）

绘制柱状图

绘制柱状图主要是绘制文字、线段、矩形的结合。
这里比较繁琐，需要计算柱子的开始位置与结束位置，在实际工作中通常使用echarts等工具来进行图表绘制。
这里展示一下练习的代码：

let canvas = document.querySelector('canvas');
    //获取上下文
    let ctx = canvas.getContext('2d');
    //设置字体大小
    ctx.font = '20px 微软雅黑';
    //绘制文本
    ctx.fillText('数据可视化',50,50);
    //绘制线段
    ctx.moveTo(100,100);
    ctx.lineTo(100,400);
    ctx.lineTo(700,400);
    //绘制其他线段
    ctx.moveTo(100,100);
    ctx.lineTo(700,100);
    ctx.fillText('150',60,110);

    ctx.moveTo(100,160);
    ctx.lineTo(700,160);
    ctx.fillText('120',60,170);

    ctx.moveTo(100,220);
    ctx.lineTo(700,220);
    ctx.fillText('90',60,230);
    
    ctx.moveTo(100,280);
    ctx.lineTo(700,280);
    ctx.fillText('60',60,290);
    
    ctx.moveTo(100,340);
    ctx.lineTo(700,340);
    ctx.fillText('30',60,350);
    ctx.fillText('0',70,410);
    //绘制水平轴底部线段 600/4 = 150
    ctx.moveTo(250,400);
    ctx.lineTo(250,410);
    //底部文字
    ctx.fillText('食品',150,423);

    ctx.moveTo(400,400);
    ctx.lineTo(400,410);
    //底部文字
    ctx.fillText('数码',300,423);

    ctx.moveTo(550,400);
    ctx.lineTo(550,410);
    //底部文字
    ctx.fillText('服饰',450,423);

    ctx.moveTo(700,400);
    ctx.lineTo(700,410);
    //底部文字
    ctx.fillText('箱包',600,423);
    ctx.lineTo
    ctx.stroke();

    //绘制矩形
    ctx.fillRect(125,200,100,200)