svg放大缩小拖动_Day2 三种图表技术SVG、Canvas、WebGL 3D比较

2024-06-01 16:02:11

1.什么是SVG？

描述：

一种使用XML描述的2D图形的语言
SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

2.什么是canvas？

描述：

通过Javascript来绘制2D图形。
是逐像素进行渲染的。
其位置发生改变，会重新进行绘制。

3.什么是WebGL 3D？

说白了就是基于Canvas的3D框架
主要用来做 3D 展示、动画、游戏。

因为前两项都是描述2D图形的，而WebGL是描述3d的，所以以下针对SVG和Canvas做比较。

3.有了Canvas为什么还要使用SVG

最重要的一点是SVG不依赖于终端设备的像素，可以随意放大缩小但是不会失真

继续：为什么SVG放大不会失真而Canvas却会变模糊呢？

因为SVG的渲染的原理是通过对图形的数学描述来绘图的，例如：以下哆啦A梦的头型的思路是，我先画一个贝塞尔函数，然后填充颜色。

而Canvas的渲染原理是通过对每个像素颜色的填充，最后组成图形，例如：以下马里奥的帽子我们可以看出，其实帽子的形状是由一个个像素填充出来的。

另外Canvas渲染出来的图叫位图,SVG渲染出来的图叫矢量图

看到这里你肯定会觉得那直接所有图形都用SVG画不就行了，位图就可以直接淘汰了呀，但是SVG画的图也有缺点，以下针对两者的不同做一个对比。

4.两者的对比

理解适用场景：

从以下这张微软开发社区公布的性能图中也可以看出，SVG在绘图面积较大，数据量较小的时候性能较好，渲染时间较短，而Canvas刚好相反。

5.总结

Canvas和SVG两者的适用场景不同，开发者在使用是应根据具体的项目需求来选择相应的渲染方式。

最后附上一个SVG编译器帮大家更好的理解和使用SVG，可以直接复制代码编译运行

SVG 编辑器

`创建`

Rect Circle Ellipse Line

`形状`

请先创建图形

`外观和变换`

填充

描边

translateX translateY rotate scale

代码效果图

svg放大缩小拖动_Day2 三种图表技术SVG、Canvas、WebGL 3D比较相关推荐

element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览最近同事在写一个关于图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
计算机辅助的临床会谈,e医生学习日记24-临床心理学三种研究技术
e医生学习日记24-临床心理学三种研究技术 (2006-05-12 06:54:59) 1.访谈法:是研究者通过与研究对象的交谈来收集有关对方心理特征与行为的数据资料的研究方法.特点是由研究者(访谈者 ...
ZigBee网络数据传递流程_蓝牙、Wifi与ZigBee三种，这三种无线传输技术，谁能一统天下...
智能产品种类越来越多,运用在智能家居上的技术也越来越成熟.然而在无线通信协议上却一直无法做到统一,从目前的情况来看,短期内是无法实现这一愿望的了.既然如此,我们何不另辟蹊径,在这些标准中,选择优势最大 ...
Android 系统（188）---In-Cell、On-Cell、OGS三种屏幕技术
In-Cell.On-Cell.OGS三种屏幕技术手机屏幕在生产过程中需要对保护玻璃,触摸屏.显示屏着三部分进行两次贴合.如果采用框贴显示效果将大打折扣,而如果采用全贴合良品率又是一个问题.由于保护 ...
三种编码器技术详解：各有利弊，如何选择？
点击上方"大鱼机器人",选择"置顶/星标公众号" 福利干货,第一时间送达! 在多种应用中,旋转编码器都是组成运动控制反馈回路的关键元器件,包括工业自动化设备和过 ...
【高精度定位】关于GPS、RTK、PPK三种定位技术的探讨
高精度定位通常是指亚米级.厘米级以及毫米级的定位,从市场需求来看,定位的精度越高往往越好."高精度.低成本"的定位方案无疑将是未来市场的趋势. 在物联网时代,大多数的应用或多或少都 ...
光复用技术中三种重要技术_三种复用技术
三种复用技术在光纤通信中,复用技术被认为是扩展现存光纤网络工程容量的主要手段. 复用技术主要包括时分复用 TDM ( Time Division Multiplexing )技术.空分复用 SDM ...
iOS- NSThread/NSOperation/GCD 三种多线程技术的对比及实现
1.iOS的三种多线程技术 1.NSThread 每个NSThread对象对应一个线程,量级较轻(真正的多线程) 2.以下两点是苹果专门开发的"并发"技术,使得程序员可以不再去关心 ...
ar vr mr 计算机技术,AR/VR/MR傻傻分不清？一图带你看懂三种虚拟现实技术
原标题:AR/VR/MR傻傻分不清?一图带你看懂三种虚拟现实技术 AR.VR早已出现在我们生活中,丰富的AR手机游戏带来了新的娱乐方式,几十块就能买到的VR盒子插进手机就能马上"穿越&quo ...

最新文章

热门文章