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

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

news 2025/11/22 8:43:52

目录

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/11/20 1:58:41

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/11/21 8:18:15

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/11/16 23:23:44

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/11/16 21:59:07

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/11/17 1:38:54

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/11/17 13:03:02

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/11/18 20:09:55

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2025/11/17 8:04:50

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/11/20 4:57:27