【前端数据可视化】canvas 基础指令

canvas

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

 

　　canvas标签

<canvas>标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。

注意：必须指定宽高

?
1
<canvas id="charts" width="800" height="400"></canvas>

 

　　getContext()

context是一个封装了很多绘图功能的对象，我们在页面中创建一个canvas 标签之后，首先要使用 getContext() 获取 canvas的上下文环境，目前getContext() 的参数只有 2d，暂时还不支持 3d

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

?
1
2
const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');

 

　　绘制线段

  • moveTo(x,  y)：把路径移动到画布中的指定点，不创建线条
  • lineTo(x,  y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条
?
1
2
3
4
context.strokeStyle = 'yellowgreen';
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <!-- canvas画布:是HTML5中新增的一个特性，双闭合标签 -->
    <!-- canvas标签默认宽度与高度 300 * 150 -->
    <!-- 浏览器认为canvas标签是一张图片 -->
    <!-- 给canvas画布添加文本内容没有任何意义 -->
    <!-- 给canvas标签添加子节点没有任何意义的 -->
    <!-- 你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成 -->
    <!-- canvas标签的w|h务必通过canvas标签属性width|height设置 -->
    <!-- 切记不能通过样式去设置画布的宽度与高度 -->
    <canvas width="600" height="400"></canvas>
</body>

</html>
<script>
    //canvas标签任何操作务必通过JS完成
    //通过JS当中"笔"去完成
    let canvas = document.querySelector('canvas');
    //获取画布的笔【上下文】
    let ctx = canvas.getContext('2d');
    //绘制线段:绘制线段的起点的设置
    ctx.moveTo(100,100);
    //其他点的设置：可以有多个
    ctx.lineTo(100,200);
    ctx.lineTo(200,100);
    //设置图形的填充的颜色
    ctx.fillStyle = "red";
    ctx.fill();
    //设置线段的颜色与宽度
    ctx.strokeStyle = "purple";
    ctx.lineWidth="20"
    //可以设置起点与最终的结束点连接在一起
    ctx.closePath();
    //stroke方法绘制线段
    ctx.stroke();
</script>
canvas绘制线段
复制代码

 

 

　　绘制矩形

  • fillRect(x,  y,  width,  height)    绘制填充颜色的矩形
  • strokeRect(x,  y,  width,  height)   绘制线条的矩形
?
1
2
3
4
context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px
        }
        canvas{
            border:1px solid black;
        }
    </style>
</head>
<body>
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
    //获取DOM节点
    let canvas = document.querySelector('canvas');
    //获取上下文
    let ctx = canvas.getContext('2d');
    //绘制矩形第一种方式:参数为x、y、w、h
    //这种的矩形没有办法设置填充颜色
    ctx.strokeRect(100,200,100,200);
    //第二种方式绘制矩形
    //填充颜色可以替换
    //绘制图形之前设置填充颜色
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    ctx.fillRect(300,200,100,200);
</script>
canvas绘制矩形
复制代码

 

 

　　绘制圆形

  • arc(x,  y,  radius,  starAngle,  endAngle,  anticlockwise)
    • x : 圆心的 x 坐标
    • y：圆心的 y 坐标   
    • radius ： 半径
    • starAngle ：开始角度
    • endAngle：结束角度
    • anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针
?
1
2
3
4
5
6
7
8
context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
// 或
// context.stroke(); // 此时就会有问题
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
     //获取DOM
     let canvas = document.querySelector('canvas');
     //获取上下文
     let ctx = canvas.getContext('2d');
     //绘制圆形
     ctx.beginPath();
     //绘制圆形的方法：x、y,r,起始弧度、结束的弧度,是否逆时针绘制
     ctx.arc(100,100,50,0,2 * Math.PI,true);
     //设置填充颜色
     ctx.fillStyle = 'red';
     ctx.fill();
     //绘制圆形
     ctx.stroke();

     //绘制一个元
     ctx.beginPath();
     ctx.arc(200,200,50,0,1,true);
     ctx.stroke();
</script>
canva绘制圆形
复制代码

 

 

　　清除路径

清除绘画的路径，多个图形就不会连接在一起

?
1
2
context.beginPath()
context.closePath()

 

　　清除矩形区域

当在一个画布反复绘制图形，需要将上一次的图形清空

  • clearRext(x,  y,  width,  height)
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
     <!-- 画布的宽度与高度通过属性设置，千万别通过样式去设置 -->
     <canvas width="600" height="400"></canvas>
</body>
</html>
<script>
     //获取节点
     let canvas = document.querySelector('canvas');
     //获取上下文-笔
     let ctx = canvas.getContext('2d');
     //绘制矩形
     ctx.fillRect(100,200,100,200);
     //清除画布-整个画布被清除
    //ctx.clearRect(0,0,600,400);
    //清除部分画布
    ctx.clearRect(100,200,50,100);
    //设置文字大小
    ctx.font="20px 微软雅黑";
    ctx.fillStyle ='red';
    //绘制文字
    ctx.fillText("数据可视化",50,20);
</script>
清除画布与绘制文字
复制代码

 

 

　　绘制文字

  • fillText(text,  x,  y,  maxWidth)

 

　　案例：绘制一个柱状图

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
     <canvas width="800" height="420"></canvas>
</body>
</html>
<script>
     //获取节点
     let canvas = document.querySelector('canvas');
     //获取上下文
     let ctx = canvas.getContext('2d');
     //绘制文本--左上角的文本
     ctx.font="16px 微软雅黑";
     ctx.fillText('数据可视化',50,80);
     //绘制线段
     ctx.moveTo(100,100);
     ctx.lineTo(100,400);
     ctx.lineTo(700,400);
     ctx.stroke();

     //绘制其他的线段
     ctx.moveTo(100,100);
     ctx.lineTo(700,100);
     ctx.fillText('150',70,110);

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

     ctx.moveTo(100,220);
     ctx.lineTo(700,220);
     ctx.fillText('90',70,230);

     ctx.moveTo(100,280);
     ctx.lineTo(700,280);
     ctx.fillText('60',70,290);

     ctx.moveTo(100,340);
     ctx.lineTo(700,340);
     ctx.fillText('30',70,350);
     ctx.fillText('0',70,400);
     ctx.stroke();
     //绘制水平轴底部的线段
     ctx.moveTo(250,400);
     ctx.lineTo(250,410);
     //底部的文字
     ctx.fillText('食品',170,415);

     ctx.moveTo(400,400);
     ctx.lineTo(400,410);
     ctx.fillText('数码',310,415);
     ctx.moveTo(550,400);
     ctx.lineTo(550,410);
     ctx.fillText('服饰',450,415);
     ctx.fillText('箱包',600,415);
     ctx.stroke();

     //绘制矩形
     ctx.fillStyle = 'red';
     ctx.fillRect(120,200,100,200)
</script>
canvas绘制一个柱形图
复制代码
posted @   wanglei1900  阅读(163)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示