当前位置： 首页 > news >正文

【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型

news 2026/2/10 7:42:13

目录

Canvas：HTML5新增 Canvas标签（画布）

渲染上下文canvas.getContext(contextType[, contextAttributes])

上下文类型（contextType）

上下文属性 (contextAttributes)

示例

动画

setInterval(function, delay) ： 无需互动，按频率执行

setTimeout(function, delay)：互动，延时执行

requestAnimationFrame(callback)：重绘之前执行

canvas 污染：跨域

svg：Scalable Vector Graphics可缩放矢量图

引入原因：体积小、放缩与分辨率无关

webGL：openGL的web拓展

glsl着色器语言：gpu上运行

技术选型

数据化可视化引擎

ECharts

大数据：流加载（4.0+）、 WebSocket 、对数据分块后加载、增量渲染

移动端：可选 SVG （4.0+）渲染模块，减少内存占用

AntV

Canvas：HTML5新增 Canvas标签（画布）

<!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>canvas 基本使用</title>
</head>
<body><canvas width="200" height="200">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
</body>
</html>
  • Canvas标签的默认大小为：300 x 150 (像素)
  • 支持Canvas标签的浏览器会忽略容器中包含的内容正常渲染Canvas标签，而不支持Canvas标签的浏览器则相反

渲染上下文canvas.getContext(contextType[, contextAttributes])

上下文类型（contextType）

常见的值：

  • "2d", 建立一个 CanvasRenderingContext2D 二维渲染上下文。
  • "webgl" 创建一个 WebGLRenderingContext 三维渲染上下文对象

上下文属性 (contextAttributes)

canvas.getContext("webgl", { antialias: false, depth: false });

2d 上下文属性：

  • alpha: boolean值表明canvas包含一个alpha通道。默认为true，透明背景。如果设置为false, 浏览器将认为canvas背景总是不透明的，这样可以加速绘制透明的内容和图片。

WebGL 上下文属性：

  • alpha: boolean值表明canvas包含一个alpha缓冲区。
  • antialias: boolean值表明是否开启抗锯齿。
  • depth: boolean值表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。
  • failIfMajorPerformanceCaveat: 表明在一个系统性能低的环境是否创建该上下文的boolean值。
  • powerPreference: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。可能值如下：
    • "default":自动选择，默认值。
    • "high-performance": 高性能模式。
    • "low-power": 节能模式。
  • preserveDrawingBuffer: 如果这个值为true缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。

示例

var ctx = canvas.getContext('2d');// 绘制一条从起点（x: 50, y:50）到 另一个点（x: 200, y:200）的直线ctx.moveTo(50, 50);ctx.lineTo(200, 200);ctx.stroke();//实线

动画

setInterval(function, delay) ： 无需互动，按频率执行

setTimeout(function, delay)：互动，延时执行

requestAnimationFrame(callback)：重绘之前执行

在 Fiber 中使用到了requestAnimationFrame，它是浏览器提供的绘制动画的 api 。它要求浏览器在下次重绘之前（即下一帧）调用指定的回调函数更新动画。

 // 获取 canvas 元素var canvas = document.getElementById('canvas');// 通过判断getContext方法是否存在来判断浏览器的支持性if(canvas.getContext) {// 获取绘图上下文var ctx = canvas.getContext('2d');function init(){window.requestAnimationFrame(draw);}function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.globalCompositeOperation = 'destination-over';// 清空画布ctx.clearRect(0, 0, 500, 500);ctx.save(); // 第一次保存画布状态ctx.translate(250, 250); // 把原心移到画布中间// 画一个地球// 画一个月亮ctx.save(); // 第二次保存画布状态// 恢复状态ctx.restore(); ctx.restore();// 画一个地球运行的轨迹window.requestAnimationFrame(draw);}init();}

canvas 污染：跨域

将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。

svg：Scalable Vector Graphics可缩放矢量图

引入原因：体积小、放缩与分辨率无关

  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • 矢量图：与分辨率无关，在图像质量不下降的情况下被放大和缩小

在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。

  <svg width="300" height="300"><circle cx="100" cy="100" r="100"/></svg>

webGL：openGL的web拓展

glsl着色器语言：gpu上运行

（webGL难点在纯数学，脱离了前端，了解即可；平时绘图还是用d3、echarts、antv）

技术选型

了解底层原理

  1. 更好的优化和调试： 了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。

  2. 选择最佳工具： 对技术原理的理解有助于你更好地比较和选择适合特定需求的工具或框架。

  3. 更好的学习其他技术： 理解底层原理可以为学习其他相关技术打下坚实的基础，因为很多技术都有共通之处。

否则

  1. 难以解决复杂问题： 在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。

数据化可视化引擎

  • 数据驱动：数据驱动，只需提供数据和配置项，生成图表。
  • 交互与动画：如数据缩放、拖拽等，以及平滑的动画效果
  • 渲染引擎：二维 Canvas、svg，三维 WebGL 

ECharts

百度开发，适合需要快速、高效渲染大型数据集的应用场景。

大数据：流加载（4.0+）、 WebSocket 、对数据分块后加载、增量渲染

增量渲染：将渲染过程分解为多个步骤，逐步完成，以提高用户体验和页面加载性能。

像React的增量渲染一样，Fiber允许React按照优先级将渲染工作分割成多个步骤，逐步完成，而不是等待整个工作完成后再渲染整个界面。这有助于提高React的交互性和流畅性。

结果：加载多少渲染多少

移动端：可选 SVG （4.0+）渲染模块，减少内存占用

VML形式渲染图表 可以兼容低版本 IE

AntV

不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。

蚂蚁开发，因为包含多个专门的库，适合于特定类型数据可视化的项目，如地理数据、关系网络等。

相关文章：

【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型

目录 Canvas&#xff1a;HTML5新增 Canvas标签&#xff08;画布&#xff09; 渲染上下文canvas.getContext(contextType[, contextAttributes]) 上下文类型&#xff08;contextType&#xff09; 上下文属性 (contextAttributes) 示例 动画 setInterval(function, delay)…...

编程日记 2023/11/27 17:45:18

【Java】循环语句练习

文章目录 1. 计算5的阶乘2. 计算 1! 2! 3! 4! 5!3. 数字9 出现的次数4. 判定素数5. 求1-100之间的素数6. 求2个整数的最大公约数7. 计算分数的值8. 模拟登陆9. 输出乘法口诀表10. 求出0&#xff5e;999之间的所有“水仙花数”并输出11. 猜数字游戏&#x1f648; 1. 计算5的…...

编程日记 2023/11/27 17:44:17

「Verilog学习笔记」非整数倍数据位宽转换24to128

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 要实现24bit数据至128bit数据的位宽转换&#xff0c;必须要用寄存器将先到达的数据进行缓存。24bit数据至128bit数据&#xff0c;相当于5个输入数据第6个输入数据的拼接成一…...

编程日记 2023/11/27 17:43:16

2023亚太地区数学建模C题思路模型代码论文

C题的参考思路: 1&#xff0c;问题1的思路: 确定研究问题的主要指标体系(新能源电车的售出数量、安全性指标、充电桩数目、电池续 航里程等)&#xff0c;收集指标的对应数据&#xff0c;检验数据是否服从正态性: 若服从正态分布: 0&#xff0c;可考虑优先采用“多元方差分析”模…...

编程日记 2023/11/27 17:41:14

苹果商城App上架指南在中发里查看

苹果商城App上架指引可以在app应用分发平台网站上查看。具体步骤如下&#xff1a; 登录苹果开发者网站。进入“Certificates, Identifiers & Profiles”选项。在页面左侧选择“App Store Connect”。点击“App Store Connect”页面顶部的“Developer Guide”。在左侧菜单中…...

编程日记 2023/11/27 17:40:13

Android 框架层AIDL 添加接口

文章目录 AIDL的原理构建AIDL的流程往冻结的AIDL中加接口 AIDL的原理 可以利用ALDL定义客户端与服务均认可的编程接口&#xff0c;以便二者使用进程间通信 (IPC) 进行相互通信。在 Android 中&#xff0c;一个进程通常无法访问另一个进程的内存。因此&#xff0c;为进行通信&a…...

编程日记 2023/11/27 17:39:11

ubuntu命令行下中文乱码怎么解决

大家好，今天来介绍ubuntu命令行中文乱码怎么解决(ubuntu中文文件名乱码)的问题，以下是渲大师小编对此问题的归纳和整理，感兴趣的来一起看看吧！ ubuntu命令行下中文乱码怎么解决 我也呀见过这个问题 一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字谈码符编码为zh_CN.UT…...

编程日记 2023/11/27 17:38:10

沈阳陪诊系统|陪诊软件开发功能

陪诊小程序的出现它可以帮助患者或家属解决就医过程中的各种问题。根据数据显示&#xff0c;2021年中国陪诊市场规模约为36.7亿元&#xff0c;预计到2025年将达到100亿元。同时&#xff0c;在医疗行业数字化转型的大背景下&#xff0c;陪诊微信小程序作为一种创新的医疗服务模式…...

编程日记 2023/11/27 17:37:09

Element-Plus 表格 el-table 如何支持分页多选

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…...

编程日记 2023/11/27 17:36:08

网站被流量攻击了,该怎么处理

几乎每个网站都面临被攻击或者入侵的风险&#xff0c;无论是简单的博客论坛、投资平台、小型的独立电商网站还是动态电子商务平台都有被攻击的情况出现,只是或大或小,或多或少罢了 为什么网站会被攻击&#xff1f;黑客如何来入侵这些网站&#xff1f;如何才能有效保护我的网站不…...

编程日记 2023/11/27 17:35:07

配置特定 IP 地址走指定网关

公司有两个日常上网用的路由器&#xff0c;分别接不同的两条网线&#xff0c;虽然都是电信的&#xff0c;但是一条偶尔会抽风&#xff0c;我的 VPS 会连不上&#xff0c;也就是挂在上面的 SS 无法使用。恰好这根线是公司接台式机的&#xff0c;也就是说平时上班偶尔会无法科学上…...

编程日记 2023/11/27 17:34:06

Linux的基本指令（四）

目录 前言 时间相关的指令 date指令 时间戳 日志 时间戳转化为具体的时间 cal指令 find指令&#xff08;十分重要&#xff09; grep指令&#xff08;行文本过滤工具&#xff09; 学前补充 什么是打包和压缩&#xff1f; 为什么要打包和压缩&#xff1f; 怎么打包和…...

编程日记 2023/11/27 17:33:04

vue+elementui如何实现在表格中点击按钮预览图片？

效果图如上&#xff1a; 使用el-image-viewer 重点 &#xff1a; 引入 import ElImageViewer from "element-ui/packages/image/src/image-viewer"; <template><div class"preview-table"><el-table border :data"tableData" …...

编程日记 2023/11/27 17:31:02

LLaMA 2：开源的预训练和微调语言模型推理引擎 | 开源日报 No.86

facebookresearch/llama Stars: 36.0k License: NOASSERTION LLaMA 2 是一个开源项目&#xff0c;用于加载 LLaMA 模型并进行推理。 该项目的主要功能是提供预训练和微调后的 LLaMA 语言模型的权重和起始代码。这些模型参数范围从 7B 到 70B 不等。 以下是该项目的关键特性…...

编程日记 2023/11/27 17:30:01

01-AI大模型智能客服 V0.1「上」

你好&#xff0c;我是悦创。 首发&#xff1a;https://mp.weixin.qq.com/s/6MTkpWZCEbFWOcUn0Vexvw V0.1 版本我将分为上中下三篇进行书写和发布&#xff0c;欢迎分享和我微信进讨论群&#xff1a;Jiabcdefh。 计划&#xff1a; 会迭代好几个版本&#xff0c;看阅读量和点赞…...

编程日记 2023/11/27 17:29:00

【23真题】罕见211！数一配英二！

今天分享的是23年合肥工业大学833的信号与系统数字信号处理试题及解析。合工大833考数一英二&#xff0c;这样的搭配还是很少见的。 本套试卷难度分析&#xff1a;22年合肥工业大学833考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取!平均分为80和…...

编程日记 2023/11/27 17:27:59

Linux 项目自动化构建工具：make/makefile

什么是 make make 是一个命令&#xff0c;他会在源文件的当前目录下寻找 makefile 或者 Makefile 文件执行这个文件中的代码。 makefile 文件的编写 我们先来见见猪跑&#xff0c;看看 make 怎么用的&#xff1a; 下面是 makefile 文件的内容&#xff1a; 这是 test.c 中的…...

编程日记 2023/11/27 17:26:58

android trace文件的抓取与查看方法

本地手机抓取trace 解压android trace文件的抓取与查看方法 找到config.pbtx文件&#xff0c;连接手机push进去 # push config.pbtx &#xff0c;/data/local/tmp/为自定义push到的目录 adb push config.pbtx /data/local/tmp/ adb shell # 抓取trace&#xff0c; /data/loc…...

编程日记 2023/11/27 17:25:57

ffmpeg开发 环境配置

ffmpeg开发简图 1 下载ffmpeg开发包 https://ffmpeg.org/download.html 包含三个版本&#xff1a;Static、Shared以及Dev Static --- 包含3个应用程序&#xff1a;ffmpeg.exe , ffplay.exe , ffprobe.exe&#xff0c;体积都很大&#xff0c;相关的DLL已经被编译到exe里面去…...

编程日记 2023/11/27 17:23:55

C++STL——string类详解及其模拟实现

CSTL——string类 1. STL简介 STL全称standard template libaray&#xff0c;译为标准模板库 需要注意&#xff0c;STL不是C的标准库&#xff0c;而是C标准库的重要组成部分STL是一个包含众多数据结构和算法的软件框架 下面展示STL的六大组件&#xff1a; 本章&#xff0c;我…...

编程日记 2023/11/27 17:22:54

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/9 16:05:07

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/12/17 5:54:30

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2026/2/8 5:05:41

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51