数据可视化记一基础学习(canvas、svg、WebGL、zrender、D3、Three.js)

最新推荐文章于 2025-04-11 13:59:13 发布
最新推荐文章于 2025-04-11 13:59:13 发布
阅读量2.2k 收藏 10
点赞数
分类专栏： 数据可视化 文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37642966/article/details/108390425
版权

目录

一、canvas

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

1.1 canvas 绘图的流程
	 1. 编写 canvas 标签（注意指定宽高）
	 2. 获取 canvas DOM 对象
	 3. 获取 Canvas 对象
	 4. 设置绘图属性
	 5. 调用绘图 API
1.2 入门案例：绘制点、矩形、直线和圆形

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById('canvas'); // 获取 DOM 对象
      const ctx = canvas.getContext('2d'); // 获取 Canvas 对象
      ctx.fillStyle = 'red'; // 填充为红色
      ctx.fillRect(0, 0, 50, 50); // 绘制矩形

      ctx.beginPath(); // 开始绘制路径
      ctx.lineWidth = 1; // 线条宽度
      ctx.strokeStyle = 'blue'; // 线条填充色
      ctx.moveTo(100, 100); // 起点坐标
      ctx.lineTo(250, 75); // 中间点坐标
      // 改变线宽
      // ctx.stroke(); // 绘制线段
      // ctx.lineWidth = 2; // 修改线条宽度
      ctx.lineTo(300, 100); // 终点坐标
      ctx.stroke(); // 绘制线段

      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'green'; // 圆形边框色
      ctx.fillStyle = 'red'; // 圆形填充色
      ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 圆心x坐标，圆心y坐标，半径，开始角度，结束角度绘制圆形
      ctx.stroke(); // 绘制圆形的边框
      ctx.fill(); // 绘制圆形的填充色

      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = 'red';
      ctx.moveTo(300, 300);
      ctx.lineTo(301, 301); // 绘制一个点
      ctx.stroke();
    </script>
  </body>
</html>
1.3 进阶案例：图片压缩

在线演示
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="file" id="upload">
    <script>
      const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg']; // 限定图片文件类型
      const MAXSIZE = 1024 * 1024 * 3; // 限定图片最大容量
      const MAXSIZE_STR = '3MB';
      function convertImageToBase64(file, cb) {
        let reader = new FileReader();
        reader.addEventListener('load', function(e) {
          const base64Image = e.target.result; // 获取文件内容，等同于 reader.result
          cb(base64Image);
          reader = null;
        });
        reader.readAsDataURL(file); // 读取 file 对象中的内容
      }
      function compress(base64Image, cb) {
        let maxW = 1024;
        let maxH = 1024;

        const image = new Image();
        image.addEventListener('load', function() {
          let ratio; // 压缩比
          let needCompress = false; // 是否需要压缩
          if (maxW < image.naturalWidth) {
            needCompress = true;
            ratio = image.naturalWidth / maxW;
            maxH = image.naturalHeight / ratio;
          }
          if (maxH < image.naturalHeight) {
            needCompress = true;
            ratio = image.naturalHeight / maxH;
            maxW = image.naturalWidth / ratio;
          }
          if (!needCompress) {
            maxW = image.naturalWidth;
            maxH = image.naturalHeight;
          }
          const canvas = document.createElement('canvas');
          canvas.setAttribute('id', '__compress__');
          canvas.width = maxW;
          canvas.height = maxH;
          canvas.style.visibility = 'hidden';
          document.body.append(canvas);

          const ctx = canvas.getContext('2d');
          ctx.clearRect(0, 0, maxW, maxH);
          ctx.drawImage(image, 0, 0, maxW, maxH); // 渲染图片
          const compressImage = canvas.toDataURL('image/jpeg', 0.9); // 压缩图片
          cb(compressImage);
          const _image = new Image();
          _image.src = compressImage; // 设置图片地址
          document.body.appendChild(_image); // 渲染图片
          canvas.remove(); // 移除 canvas
        });
        image.src = base64Image; // 将图片设置到 image 的 src 属性中
        document.body.appendChild(image);
      }
      function uploadImage(compressImage) {
        console.log('upload image to server...', compressImage);
      }
	  
	  // 获取dom元素
      const upload = document.getElementById('upload');
      // 事件监听
      upload.addEventListener('change', function(e) {
        // 下面为ES6写法，等价 const file = e.target.files[0];
        const [file] = e.target.files;
        console.log(file);
        // 没有文件，直接return
        if (!file) {
          return;
        }
        const { type: fileType, size: fileSize } = file;
        // 图片类型检查
        if (!ACCEPT.includes(fileType)) {
          alert('不支持上传该格式文件！');
          upload.value = '';
          return;
        }
        // 图片大小检查
        if (fileSize > MAXSIZE) {
          alert('文件超出' + MAXSIZE_STR + '！');
          upload.value = '';
          return;
        }
        // 压缩文件
        convertImageToBase64(file, (base64Image) => compress(base64Image, uploadImage));
      });
    </script>
  </body>
</html>
二、svg

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

2.1 svg 绘图的流程
	1、编写 svg 标签，指定宽高
	2、编写 svg 绘图标签
	3、编写绘图属性和样式
2.2 入门案例：绘制点、矩形、直线和圆形
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  	// 创建svg画布
    <svg width="800" height="800">
    // 绘制矩形 fill：填充色 stroke-width：边框宽度 stroke：边框颜色
      <rect
        width="50"
        height="50"
        style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
      />
      // 绘制线
      <line 
        x1="100" 
        y1="100" 
        x2="250" 
        y2="75"
        style="stroke:blue;stroke-width:1"
      />
      <line 
        x1="250" 
        y1="75" 
        x2="300" 
        y2="100"
        style="stroke:blue;stroke-width:1"
      />
      // 绘制圆
      <circle 
        cx="200" 
        cy="200" 
        r="50" 
        stroke="green"
        stroke-width="2" 
        fill="red"
      />
      // 绘制点
      <line 
        x1="300" 
        y1="300" 
        x2="301" 
        y2="301"
        style="stroke:red;stroke-width:1"
      />
    </svg>
  </body>
</html>
三、WebGL

WebGL（Web Graphics Library）是一种 3D 绘图协议，WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化

3.1 WebGL 案例
3.2 WebGL 绘制点
<html>
  <body>
    <canvas id="canvas" width="200px" height="200px"></canvas>
    <script>
    window.onload = function () {
      //顶点着色器程序
      var VSHADER_SOURCE =
          "void main() {" +
              //设置坐标
          "gl_Position = vec4(0.0, 0.0, 0.0, 1.0); " +
              //设置尺寸
          "gl_PointSize = 10.0; " +
          "} ";
    
      //片元着色器
      var FSHADER_SOURCE =
          "void main() {" +
              //设置颜色
          "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
          "}";
      //获取canvas元素
      var canvas = document.getElementById('canvas');
      //获取绘制二维上下文
      var gl = canvas.getContext('webgl');
      if (!gl) {
          console.log("Failed");
          return;
      }
      //编译着色器
      var vertShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertShader, VSHADER_SOURCE);
      gl.compileShader(vertShader);
    
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragShader, FSHADER_SOURCE);
      gl.compileShader(fragShader);
      //合并程序
      var shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertShader);
      gl.attachShader(shaderProgram, fragShader);
      gl.linkProgram(shaderProgram);
      gl.useProgram(shaderProgram);
    
      //绘制一个点
      gl.drawArrays(gl.POINTS, 0, 1);
    }
    </script>
</body>
</html>
四、zrender（echarts底层渲染方式）

zrender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
参考文档、官方案例、官方案例源码

4.1 zrender 绘图的流程
	1、引入 zrender 库
	2、编写 div 容器
	3、初始化 zrender 对象
	4、初始化 zrender 绘图对象
	5、调用 zrender add 方法绘图
4.2 入门案例：绘制点、矩形、直线和圆形
<!DOCTYPE html>
<html>
  <head>
    // zrender引入文件 
    <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  </head>
  <body>
    <div id="container" style="width: 800px;height: 800px;"></div>
    <script>
      var zr = zrender.init(document.getElementById('container')); // 初始化
      
      //  定义矩形
      var rect = new zrender.Rect({
        // 矩形的形状
        shape: {
          x: 0,
          y: 0,
          width: 50,
          height: 50
        },
        style: {
          fill: 'red', // 填充颜色
          lineWidth: 0 // 边框宽度
        }
      });
      
      // 定义线段
      var line = new zrender.Polyline({
        shape: {
          points:[
            [100, 100],
            [250, 75],
            [300, 100]
          ]
        },
        style: {
          stroke: 'blue',
          lineWidth: 1
        }
      });
      
      // 定义圆
      var circle = new zrender.Circle({
        shape: {
          cx: 200,
          cy: 200,
          r: 50
        },
        style: {
          fill: 'red',
          stroke: 'green',
          lineWidth: 2
        }
      });

	 // 定义点
      var point = new zrender.Polyline({
        shape: {
          points:[
            [300, 300],
            [301, 301]
          ]
        },
        style: {
          stroke: 'red',
          lineWidth: 1
        }
      });
      zr.add(rect); // 绘制矩形
      zr.add(line); // 绘制线段
      zr.add(circle); // 绘制原型
      zr.add(point);  // 绘制点
    </script>
  </body>
</html>
五、D3

D3（Data-Driven Documents） 是一个 Javascript 图形库，基于 Canvas、Svg 和 HTML。
官网地址、D3案例、D3.js 学习之路

5.1 入门案例：数据绑定

演示地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.js"></script>
  </head>
  <body>
    <p>Vue</p>
    <p>React</p>
    <p>Agular</p>
    <button id="datum">datum</button>
    <button id="data">data</button>
    <script>
      var body = d3.select("body");
      var p = body.selectAll("p");
      function doDatum() {
        // datum
        var str = "Framework";
        p.datum(str);
        p.text(function(d, i) {
          return `${d}-${i}`;
        });
      }
      function doData() {
        // data
        var dataset = ['Vue', 'React', 'Agular'];
        p.data(dataset)
          .text(function(d, i) {
            return `${d}-${i}`;
          });
      }
      document.getElementById('datum').addEventListener('click', function(e) {
        doDatum();
      });
      document.getElementById('data').addEventListener('click', function(e) {
        doData();
      });
    </script>
  </body>
</html>
5.2 进阶案例：思维导图

源码地址
在这里插入图片描述

六、Three.js

Three.js 是一个基于 WebGL 的 Javascript 3D 图形库
git地址、官方案例

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
  </head>
  <body>
    <script>
      var camera, scene, renderer;
      var geometry, material, mesh;

      init(); // 图形渲染
      animate(); // 图形动画

      function init() {
      	// 调整camera角度
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 1;
        scene = new THREE.Scene(); // 初始化一个场景
        geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
        material = new THREE.MeshNormalMaterial();
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        renderer = new THREE.WebGLRenderer( { antialias: true } ); // 绘制
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
      }

	  // 定义动画
      function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        renderer.render( scene, camera );
      }
    </script>
  </body>
</html>
使用ZRender和D3绘制JavaScript关系图谱
syntax_api860的博客
10-06 431
在JavaScript中，我们可以使用ZRender和D3这两个强大的库来创建交互式的关系图谱。接下来，我们创建一个HTML文件，然后在文件中添加一个容器元素，用于容纳绘制的关系图谱。在上述代码中，我们首先创建了一个ZRender实例，并将其绑定到HTML中的容器元素上。然后，我们创建了一个D3力导向图实例，并设置了力导向图的一些参数，如链接力、斥力和中心力。然后，我们创建了关系图谱的节点，使用。在关系图谱的绘制过程中，我们首先创建了关系图谱的链接线，使用。最后，我们设置了力导向图的初始状态，并通过。
你真的了解Canvas吗--解密一【ZRender篇】
swj的博客
09-09 333
本文讲讲zrender的初始化init过程
Canvas 、WebGL 、SVG和Three.js
u014291990的博客
09-25 3857
如果你第一次接触WebGL、Canvas等概念，可能不知道它们都是什么，所以下面会对这几个常说的概念的进行简单的解释。但是如果想真理解这几个概念，你还需要分别找一个对应代码案例测试体验下，如果只看文字，会比较抽象，无法深入理解。 SVG 教程 Canvas教程 WebGL入门教程 Three.js入门教程 SVG svg是一套二维绘制标准，通过一个标签或者说元素来绘制一个图形，如果你有前端基础...
【Javascript】在canvas中加载shader着色器的方法（开箱即用）
最新发布
qq_61834461的博客
04-11 280
【代码】【Javascript】在canvas中加载shader着色器的方法（开箱即用）
高效canvas绘图框架——zrender
子龙
11-03 1万+
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同 Architecture MVC核心封装实现图形仓库、视图渲染和交互控制： Stroage(M) : shape数据CURD管理Painter(V) : canvase元素生命周期管理，视图渲染，绘画，更新控制Handler(C) : 事件交互处理，实现完整dom事件模拟封
html5 类库,HTML5 Canvas类库 : ZRender
weixin_31226805的博客
06-21 416
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！ ArchitectureMVC核心封装实现图形仓库、视图渲染和交互控制： 特色 简单 无需canvas基础，精简的接口方法，符合AMD标准，易学易用。require(['zrender/zrender'],function(zrender) {// just init to get a z...
轻量级的Canvas类库zrender使用笔记 ：简单自定义图件开发
热门推荐
cc_fys的博客
12-20 2万+
ECharts，一个纯 Javascript 的图表库，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。当然我们自己可能有些需求，通过修改ECharts或者highcharts的option不能实现，比如说宽度不一致的柱状图图件。可以直接使用Canvas类库zrender开发图件，或者使用snap.svg.js开源项目开发图件。这里写...
d3threejs使用D3和THREEjs实现的CSS3D变换
08-10
D3.js是一个基于SVG、Canvas和HTML的JavaScript库，它允许开发者绑定任意数据到DOM，并根据数据驱动DOM进行更新。THREE.js则是一个用于WebGL的JavaScript库，专为创建3D场景而设计。d3-threejs库将两者结合，利用...
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
1. **D3.js**（Data-Driven Documents）：这是一个基于SVG、Canvas和WebGL的JavaScript库，用于在浏览器中进行数据可视化。D3.js的核心在于它能够绑定任意数据到DOM，并使用数据驱动的方法来操作文档。通过D3，...
WebGL融合d3.js：threejs时间机器数据可视化创新
在分析给定的文件信息之前，先要明确Three.js和D3.js都是JavaScript库，它们分别用于不同的可视化任务。Three.js专注于在Web浏览器中创建和显示3D图形，而D3.js（Data-Driven Documents）则是一个非常强大的数据可视...
探索canvas动画技术：WebGL、Three.js与GLSL实践
- D3.js是一个强大的数据可视化库，它使用Web标准技术（如SVG和Canvas）来制作交互式的数据驱动图形。 - GSAP（GreenSock Animation Platform）是一个流行的JavaScript动画库，提供了一个高级的动画接口，使得复杂...
带你入门three.js——从0到1实现一个3d可视化地图
suandfei的博客
07-04 5289
前言 终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么 对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。 3d框架的选择——three.js 1.为什么选择thre
Three.js 三维坐标柱状图
04-13
Three.js制作的三维坐标轴柱状图，含坐标矢量。注意建议用webstorm打开，不要直接打开，否则坐标轴的值显示不出来，因为字体加载要在http或者https协议下才能被加载解析。
canvas mdn_canvas 配合 zrender 绘制椭圆布局
weixin_42358791的博客
01-01 381
前言最近碰到个用 canvas 绘制椭圆形的问题，研究了一下，发现挺有意思的。在经过一顿摸索以后，实现的效果，也还是挺不错的，在这个过程中也学到了不少东西吧。ellipse 方法兼容性问题之前没绘制过椭圆，上手，当然是想找找 canvas 原生有没有类似的 api 了。于是就上 mdn 搜索一番，这一找，还真的发现有类似的 api，不得不感概，这就太巧了，这问题不就不算问题了么。但是一看浏览器兼容...
图形与可视化技术：Canvas，SVG，WebGL等图形技术以及D3，Three.js等可视化库的使用
哎 你看的博客
05-11 991
图形与可视化技术：Canvas，SVG，WebGL等图形技术以及D3，Three.js等可视化库的使用、代码示例
canvas绘图、WebGL、SVG
weixin_30606461的博客
11-22 502
目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎） 三、SVG 3.1、SVG Hello Wrol...
用zrender实现工作流图形化设计（附范例代码）
肥基姆的博客
12-05 4241
 公司研发的管理系统有工作流图形化设计和查看功能，这个功能的开发历史比较久远。在那个暗无天日的年月里，IE几乎一统江湖，所以顺理成章地采用了当时红极一时的VML技术。 后来的事情大家都知道了，IE开始走下坡路，VML这个技术现在早已灭绝，导致原来的工作流图形化功能完全不能使用，所以需要采用新技术来重写工作流图形化功能。 多方对比之后，决定采用zrender库来实现（关于zrender库的
Echarts（三）调用底层zRender对象画图
前端产品工程师
04-24 6646
一、zRender介绍ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。注意：echarts3.x版本是基于zrender的canvas，4.x可以选择基于canvas或者svg。二、 调用方法本文中下方的调用方法仅针对在echarts 3.x以上版本中调用zrender对象画图，myChart代表的是获取到的DO...
使用zrender绘制基本图形
燕雷的博客
06-03 7511
基于zrender实现在canvas中绘制基本图形 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo1</title> <script type="text/javascript" src="js/echarts.js">&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值