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

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

news 2026/4/9 1:52:32

目录

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

Debian根文件系统定制：从零构建到实战优化

1. Debian根文件系统入门指南 第一次听说"根文件系统"这个概念时&#xff0c;我也是一头雾水。简单来说&#xff0c;它就像是你电脑的操作系统"骨架"——包含了启动、运行和管理系统所需的所有核心文件和目录。想象一下盖房子&#xff0c;根文件系统就是地…...

编程新知 2026/4/9 1:49:41

第6章 黎曼流形优化与几何方法

第6章 黎曼流形优化与几何方法 6.1 黎曼几何基础 6.1.1 复Stiefel流形与单位模流形&#xff08;Unit-Modulus Manifold&#xff09;度量 6.1.2 指数映射&#xff08;Exponential Mapping&#xff09;与平行移动&#xff08;Parallel Transport&#xff09; 6.1.3 测…...

编程新知 2026/4/9 1:37:34

8250串行通信避坑指南：如何用内环测试快速定位硬件故障（附Proteus仿真文件）

8250串行通信避坑指南&#xff1a;如何用内环测试快速定位硬件故障 在嵌入式系统开发中&#xff0c;串行通信故障排查往往是最令人头疼的问题之一。当你面对一个无法正常通信的系统时&#xff0c;问题可能出在硬件连接、芯片配置、软件逻辑或者中断处理等任何一个环节。而8250这…...

编程新知 2026/4/9 1:15:17

中国婴幼儿肌肤特点分析报告

中国婴幼儿肌肤受基因、气候、生活习惯等多重因素影响&#xff0c;呈现出屏障先天薄弱、结构发育缓慢、耐受力偏低等独特生理特征&#xff0c;再加上国内气候多样、高频清洁习惯、西方育儿理念本土化不足等后天因素&#xff0c;使得中国宝宝更易出现干燥、敏感、热疹、湿疹等问…...

编程新知 2026/4/9 1:09:08

初次学C语言编程（2）

上节课内容补充在上节课中的转义字符中\ddd 表示一个三个数字的八进制的数字 例如\130 十进制的ASCII是88 表示字符X\xdd表示的是一个两个数字的十六进制的数字 例如\x30 十进制ASCII是48 表示字符0\0表示null 没有字符 ASCII码是0&#xff0c;用于字符串的结束符号一、C…...

编程新知 2026/4/9 1:05:04

无障碍助手：OpenClaw利用Qwen3.5-9B实现屏幕阅读增强

无障碍助手&#xff1a;OpenClaw利用Qwen3.5-9B实现屏幕阅读增强 1. 为什么需要本地化的无障碍助手&#xff1f; 作为一名长期关注无障碍技术的开发者&#xff0c;我一直在寻找能够真正改善视障用户数字体验的解决方案。传统屏幕阅读器虽然成熟&#xff0c;但存在几个关键痛点…...

编程新知 2026/4/9 0:52:54

MLX9062x红外热成像传感器驱动开发与温度解算详解

1. MLX9062x 红外热成像阵列传感器驱动深度解析MLX9062x 系列是比利时 Melexis 公司推出的非接触式红外温度传感芯片家族&#xff0c;包含 MLX90620&#xff08;164 像素&#xff09;与 MLX90621&#xff08;164 像素&#xff0c;但支持更高帧率与增强校准&#xff09;两款核心…...

编程新知 2026/4/9 0:34:43

字符串拼接用“+”还是 StringBuilder？别再凭感觉写了嘏

前言 Kubernetes 本身并不复杂&#xff0c;是我们把它搞复杂的。无论是刻意为之还是那种虽然出于好意却将优雅的原语堆砌成 鲁布戈德堡机械 的狂热。平台最初提供的 ReplicaSets、Services、ConfigMaps&#xff0c;这些基础组件简单直接&#xff0c;甚至显得有些枯燥。但后来我…...

编程新知 2026/4/9 0:00:20

Python程序员最后的护城河：掌握无GIL环境下的内存序建模、seq_cst原子操作与TSO一致性验证（附GCC/Clang内联汇编对照表）

第一章&#xff1a;Python程序员的无GIL并发觉醒&#xff1a;从CPython锁争用到真正并行的范式跃迁Python开发者长期在CPython解释器下与全局解释器锁&#xff08;GIL&#xff09;共处——它保障了内存管理的安全&#xff0c;却也悄然扼杀了多核CPU上真正的并行计算能力。当I/O…...

编程新知 2026/4/8 23:29:41

基于VISSIM的城市道路交叉口信号控制研究

文章目录一、摘要二、交通控制的基本理论三、定时控制方案分析五、效果图源码获取一、摘要 随着全国机动车保有量的上升&#xff0c;城市道路的拥堵问题日益严重&#xff0c;优化道路交叉口信号控制是解决拥堵问题的关键。本文介绍了城市道路交叉口信号控制的研究现状&#xf…...

编程新知 2026/4/8 21:15:16