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

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

news 2025/8/28 2:07:18

目录

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/8/27 13:11:22

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/7/10 6:25:54

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/8/22 3:50:41

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/8/21 17:38:03

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/8/22 5:18:06

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/8/2 0:44:23

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/8/22 5:07:36

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2025/8/26 15:30:23