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

目录

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等更高级的技术。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/221536.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

组装自己的稳定扩散模型

在本文中&#xff0c;我们将利用 Hugging Face Diffusers 库的组件实现自己的稳定扩散模型&#xff0c;可以像 diffuser.diffuse() 一样简单地生成图像。 在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编…

Portraiture全新4.1.2版本升级更新

关于PS修图插件&#xff0c;相信大家都有安装过使用过&#xff0c;而且还不止安装了一款&#xff0c;比如最为经典的DR5.0人像精修插件&#xff0c;Retouch4me11合1插件&#xff0c;Portraiture磨皮插件&#xff0c;这些都是人像精修插件中的领跑者。其中 Portraiture 刚刚升级…

内网隧道学习

默认密码&#xff1a;hongrisec2019 一.环境搭建 网卡学习 一个网卡一个分段&#xff0c;想象成一个管道 192.168.52一段 192.168.150一段 仅主机模式保证不予外界连通&#xff0c;保证恶意操作不会跑到真实机之上 52段是内部通信&#xff0c;150段属于服务器&#xff08;…

C语言学习笔记之函数篇

与数学意义上的函数不同&#xff0c;C语言中的函数又称为过程&#xff0c;接口&#xff0c;具有极其重要的作用。教科书上将其定义为&#xff1a;程序中的子程序。 在计算机科学中&#xff0c;子程序&#xff08;英语&#xff1a;Subroutine, procedure, function, routine, me…

FFmpeg零基础学习(二)——视频文件信息获取

目录 前言正文一、获取宽高信息1、核心代码2、AVFormatContext3、avformat_alloc_context4、avformat_open_input5、avformat_find_stream_info6、av_dump_format7、av_find_best_stream End、遇到的问题1、Qt Debug模式avformat_alloc_context 无法分配对象&#xff0c;而Rele…

【Spring】Spring是什么?

文章目录 前言什么是Spring什么是容器什么是 IoC传统程序开发控制反转式程序开发理解Spring IoCDI Spring帮助网站 前言 前面我们学习了 servlet 的相关知识&#xff0c;但是呢&#xff1f;使用 servlet 进行网站的开发步骤还是比较麻烦的&#xff0c;而我们本身程序员就属于是…

广度优先遍历与最短路径

广度优先遍历从某个顶点 v 出发&#xff0c;首先访问这个结点&#xff0c;并将其标记为已访问过&#xff0c;然后顺序访问结点v的所有未被访问的邻接点 {vi,..,vj} &#xff0c;并将其标记为已访问过&#xff0c;然后将 {vi,...,vj} 中的每一个节点重复节点v的访问方法&#xf…

Runloop解析

RunLoop 前言 ​ 本文介绍RunLoop的概念&#xff0c;并使用swift和Objective-C来描述RunLoop机制。 简介 ​ RunLoop——运行循环&#xff08;死循环&#xff09;&#xff0c;它提供了一个事件循环机制在程序运行过程中处理各种事件&#xff0c;例如用户交互、网络请求、定…

HT97226 免输出电容立体声耳机放大器的应用与曲线

HT97226应用&#xff1a; ・耳机 ・多媒体音频接口 ・机顶盒 ・ 蓝光/DVD播放器 ・LCD电视 ・音频消费电子产品 HT97226应用图于曲线&#xff1a; HT97226是一款差分输入/单端输入、可直接输出驱动的耳机放大器。5V供…

网络渗透测试(认识)

ARP协议 逻辑地址变成物理地址 32bit的IP地址变换成48bit的mac地址 ARP两个字节&#xff08;0x0806&#xff09; ARP解析协议 每一个主机都有ARP高速缓存&#xff0c;此缓存中记录了最近一段时间的内其他IP地址与其MAC地址的对应关系 如果本机想与某台主机通信&#xff0c;首先…

Azure Machine Learning - 创建Azure AI搜索服务

目录 准备工作查找 Azure AI 搜索产品/服务选择订阅设置资源组为服务命名选择区域选择层创建服务配置身份验证扩展服务何时添加第二个服务将多个服务添加到订阅 Azure AI 搜索是用于将全文搜索体验添加到自定义应用的 Azure 资源&#xff0c;本文介绍如何创建Azure AI搜索服务 …

5.前端--CSS-基本概念【2023.11.26】

1. CSS 语法规范 CSS 规则由两个主要的部分构成&#xff1a;选择器以及一条或多条声明。 属性和属性值之间用英文“:”分开 多个“键值对”之间用英文“;”进行区分 选择器 : 简单来说&#xff0c;就是选择标签用的。 声明 &#xff1a;就是改变样式 2.CSS引入方式 按照 CSS 样…