canvas、svg的基本使用【数据可视化】

最新推荐文章于 2024-04-13 16:01:26 发布
最新推荐文章于 2024-04-13 16:01:26 发布
阅读量733 收藏
点赞数
文章标签： 信息可视化 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53943447/article/details/130732816
版权

什么是数据可视化？

基本概念：是关于数据视觉表现形式的科学技术研究
这个概念向我们传达了两个信息：
（1）数据可视化是一门学科
（2）数据可视化与数据和视觉有关
数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种2D图标、3D图标、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大。
特点：

  • 单机离线
  • 数据量小，维度小

1.canvas

1.1 canvas绘制线段

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

canvas标签

  • canvas标签默认宽度与高度 300 * 150
  • 浏览器认为canvas标签是一张图片
  • 给canvas画布添加文本内容没有任何意义
  • 给canvas标签添加子节点没有任何意义的
  • 你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成
  • canvas标签的width|height务必通过canvas标签属性width|height设置
  • 切记不能通过样式去设置画布的宽度与高度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    //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>

1.2 canvas绘制矩形

  • fillRect(x, y, width, height) 绘制填充颜色的矩形
  • strokeRect(x, y, width, height) 绘制线条的矩形
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

1.3 canvas绘制圆形

  • arc(x, y, radius, starAngle, endAngle, anticlockwise)

    • x：圆心的x坐标
    • y：圆心的y坐标
    • radius：半径
    • starAngle：开始角度
    • endAngle：结束角度
    • anticlockwise：是否逆时针（true）为逆时针，（false）为顺时针
      在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

1.4 清除画布与绘制文字

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

1.5 绘制柱状图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

2. svg

svg是一种基于XML的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形

2.1 基本的SVG元素

  • <svg>包裹并定义整个矢量图。
  • <line> 创建一条直线
  • <polyline> 创建折线
  • <circle> 创建圆
  • <ellipse> 创建圆和椭圆
  • <polygon> 创建多边形
  • <path> 指定点一级点和点之间的线来创建任意形状

svg双闭合标签：默认宽度与高度300 * 150
svg绘制图形务必在svg标签内部使用绘制图形

2.2 绘制直线

在这里插入图片描述

<svg class="box">
        <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
        <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
 </svg>

2.3 绘制折线

在这里插入图片描述
绘制折线:可以多个点，多个点的时候，最好带有逗号

<polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>

2.4 绘制矩形

在这里插入图片描述
fill属性：设置填充颜色的 fill-opacity设置填充颜色的透明度 stroke：线的颜色

<rect x="400" y="400" width="150" height="50" fill="pink"></rect>

2.5 绘制圆形

在这里插入图片描述

<circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'</circle>

2.6 绘制圆形|椭圆

在这里插入图片描述

cx cy ：圆心点坐标
rx： x轴半径
ry ：y轴半径

<ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>

2.7 多边形

在这里插入图片描述

<polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />

2.8 绘制任意图形

在这里插入图片描述
M：移动到初始位置
L：画线
Z：将结束和开始点闭合

<path fill-opacity="0" stroke="skyblue" d="
  M 10  10
  L 20 400
  L 30 120
  L 40 66
  L 50 99
  L 60 120
  L 70 99
  Z
"></path>
赖皮.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas SVG简介及绘制图形
m0_74022688的博客
12-19 1748
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
Canvas与SVG简介及实例
weixin_57999341的博客
12-23 250
默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。
SVG和Canvas的区别及使用方法。
最新发布
zhang_mou_r的博客
04-13 1081
Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。提示：以下是本篇文章正文内容，下面案例可供参考1.svg：1>svg是一种使用xml描述的2d图形语言2>svg基于xml，意味着svg DOM中的每个元素都可以用。可以为某个元素附加JavaScript事件处理器。3>在svg中，每个被绘制的图形都被视为对象。如果svg对象的属性发生变化，那浏览器可以自动重现图形。2.canvas1>canvas是通过JavaScript来绘制2d图形，是逐像素进行渲染的。
svg和canvas的区别
cxz
06-27 1762
1.可伸缩的矢量图形 2.是基于xml进行绘制图形 3.svg放大或者改变尺寸情况下图形质量不会有损。 4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，1.h5新增属性 2.基于js进行绘制图形1、svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。 2、canvas依赖分辨率，svg不依赖分辨率。 3、canvas不支持事件处理器，svg支持
canvas与svg的区别
weixin_42277454的博客
10-11 582
canvas与svg的区别CanvasSVG canvas和svg都允许在浏览器中创建图形，但他们在根本上是不同的 Canvas 1. canvas通过javascript来绘制2D图形。 2. canvas是逐个像素进行渲染。 3. 在canvas中，图形绘制完成后，它就不会继续得到浏览器的关注。如果位置、大小等发生变化，那么整个canvas场景也需要重新绘制，根据变化不同，会产生一定程度的重排或重绘。 4. canvas绘制的图片依赖分辨率，能够以.png .jpg格式保存存储图像 5. canvas不
数据可视化-canvas-svg-Echarts
08-19
数据可视化代码
前端可视化-基于Canvas的迷你时钟
02-08
该时钟基于Canvas实现，充分利用了Canvas2D绘图API的优势，让前端可视化技能更上一层楼，同时它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，...
详解FireFox下Canvas使用图像合成绘制SVG的Bug
01-21
本文适合适合对canvas绘制、图形学、前端可视化感兴趣的读者阅读。 楔子 所有的事情都会有一个起因。 最近产品上需要做一个这样的功能：给一些图形进行染色处理。想想这还不是顺手拈来的事情，早就研究过图形染色的...
canvas+svg实现标尺网格效果
04-11
使用js+canvas绘图，结合svg图形，实现标尺栏和网格效果。
数据可视化：数据可视化
02-05
数据可视化 数据可视化：基于d3.js或fabric.js等 市场图表 个人经验： 偏向展示场景，建议优先采用类置标语言（标记语言）的类库，直观；偏向交互场景，替换易编程，易定制的类库。 偏展现图表 图表 特色 蚂蚁金服...
数据可视化 SVG （二）
weixin_56663198的博客
03-14 278
1 渐变和滤镜 2 SVG 形变 3 路径描边动画 4 SMIL 动画 5 第三方动画库 6 SVG 动画案例
数据可视化（canvas、svg)
urnottalent的博客
05-24 575
数据可视化（canvas、svg)
数据可视化 Canvas
weixin_56663198的博客
03-07 401
1 邂逅 Canvas 2 Canvas绘制图形 3 Canvas样式和颜色 4 Canvas状态和形变 5 Canvas动画和案例
vue+svg.js 实现图像标记
joeky520的博客
03-01 3954
vue+svg.js 实现图像标记vue+svg.js 实现图像标记安装svg.js及相关插件在vue项目中引入创建画布画图/做标记清空画布清空resize删除某一子节点全局快捷键的监听 vue+svg.js 实现图像标记 本文讲的是如何使用svg.js实现图像的标记。在本文中，将使用前端框架vue及element UI搭配实现功能。本文不再赘述如何搭建vue+element ui框架，框架在本文...
canvas+SVG
weixin_54352784的博客
06-23 1464
画布坐标： canvas用于定义图形，在js脚本中可以通过canvas绘制盒子线，图，以及添加字符， 默认宽300高150 SVG定义可缩放矢量图，可绘制框，图，文本，图形图像等操作 优势： 1.万维网的标准 2.相比其他（JPEG，GIF，ico）图像文件来说，svg图像可以通过文本编辑器来创建和修改 3.svg图像可以被浏览器搜索，索引，压缩 4.可以伸缩 svg绘制矩形
html svg删除部分图形,html – 如何删除SVG周围的空白区域
weixin_27442001的博客
06-09 2231
我在一个简单的网页上显示了一个SVG,但是一旦我将图像调整到超过一定的大小(高度：~65vh),SVG周围就会有一个看不见的空间,使得页面变得庞大并且滚动条会下降,图像顶部也有很大的余量.我已经尝试在SVG中减小视图框的大小并在CSS中设置高度和宽度.这是使用以下代码和片段的页面看起来：我只是希望SVG没有围绕它的大块边框,只是让芯片操纵大小..body {background-color: #6...
fabric canvas 清空并重置画布
太空编程
12-22 5764
fabric.js是一个强大而简约的依赖HTML5上的 canvas的javascript库，Fabric在canvas元素顶部提供了交互式对象模型，它还具有SVG到画布（和画布到SVG...
前端笔记之清空canvas
ruizer的博客
09-12 758
用过的两种清空canvas的方法： 1、重置canvas的高度或高度，canvas内容就会清空 var canvas=document.getElementById("myCanvas"); canvas.height=canvas.height; 2、使用clearRect()方法 var canvas=document.getElementById("myCan
如何把数据可视化放到前端页面
04-01
要把数据可视化放到前端页面，可以使用以下方法： 1. 使用 JavaScript 图表库：JavaScript 图表库如 Highcharts、Chart.js 等可以帮助你在前端页面中创建各种图表。你只需要在 HTML 中引入相应的库文件，然后在 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值