第一阶段
在前端开发中，展示图片是非常常见的需求。最早的图片展示方式是使用HTML的<img>标签，通过引入图片的URL来显示图片。这种方式非常简单直接，适用于展示静态的、位图格式（如JPEG、PNG）的图片。
原理
浏览器解析图片资源，并以像素的方式渲染在界面上，100x100的img上的每一个像素都有各自的属性，以此来组成一幅图片
优点
- 使用方便简单
缺点
- 一张固定100x100的img，在旋转、偏移、缩放过程会失真。原因：对于img中的一个像素，它需要计算它在沿着img的某个点旋转之后的位置，但是新位置不一定在某个像素位置上，如下图
那旋转后只能在其周围的四个像素选一个渲染了，这就导致失真。偏移、缩放失真的原理也大致相同
-
100x100像素的图片在高分辨率的屏幕上会显得很小，如果通过放大来达到和正常分辨率屏幕一样的展示效果的话，就会失真。这点各位在浏览器里放大一个图片时就能很明显看出边缘像素化了，因为这个图片就这100x100像素，想渲染在10000x10000的界面上，只能每个像素放大100倍了，这样就像素化+失真了
-
对于需要渲染各种图形：正方形、线条、多边形、圆形等，并且需要给它们添加事件监听的话，img标签明显不合适。
第二阶段
诞生背景及使用场景
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，最早由W3C（World Wide Web Consortium）于2001年推出。SVG的诞生背景是为了解决传统位图图像在缩放和变换时失真的问题，以及实现更灵活的图形绘制和交互效果。SVG适用于绘制简单的、以路径和形状为基础的图形，如图标、图表、数据可视化等。它具有可缩放性、可编辑性、可搜索性和可交互性的优点，适用于不同尺寸和分辨率的设备，以及需要动态和交互式图形的应用场景。
原理
与img通过像素来表述图片不同，svg是通过向量（数学计算）来描述的，缩放、偏移、选择等都是作用在向量上的，然后浏览器根据向量+实际像素比，来渲染该向量。
比如一个弧形，img使用100x100像素来描述，svg使用line标签来表述，两者在浏览器上无变化时，img：100x100像素，svg可能是120x110像素。当我们将两者放大10倍，img:1000x1000像素，svg可能是：1500x1300像素。svg到实际像素过程中，会做很多优化+额外像素来保证svg图形的准确以及不失真。
优点
- 可绘制复杂的图形
- 可变换且不失真
- 元素可交互
缺点
- 对于复杂且大量的图形，渲染需要的资源较多
- 对于实时性要求高的场景难满足，比如实时轨迹（用户手写、游戏实时渲染场景）
canvas
诞生背景及使用场景
Canvas是HTML5新增的元素，提供了一个绘图环境，可以使用JavaScript绘制图形、图像和动画。Canvas的诞生背景是为了满足开发者对于处理复杂的、实时的图形和动画效果的需求，如游戏、数据可视化等。Canvas基于位图的绘图技术，通过像素级的绘制来创建图像，具有较高的性能和灵活性。开发者可以使用JavaScript通过绘制API来操作Canvas，实现各种自定义的图形和动画效果。
原理
通过js以像素级的颗粒度在画布上绘制元素。
优点
- 绘制性能高
- 可绘制复杂且大量的元素
- 实时性高
缺点
- 绘制出来的元素无法添加事件监听，即难以交互
- 基于cpu渲染，对于3d图形的渲染能力较弱，无法使用gpu来加速渲染
WebGl
诞生背景及使用场景
WebGL（Web Graphics Library）是一种基于OpenGL ES标准的Web图形渲染技术，最早由Khronos Group于2011年推出。WebGL的诞生背景是为了在浏览器中实现高性能的3D图形渲染，以满足对于逼真的3D场景和复杂的图形效果的需求。WebGL利用计算机的GPU加速图形渲染，可以创建逼真的3D效果，适用于游戏、虚拟现实、数据可视化等需要高度交互和真实感的应用场景。
原理
使用gpu来加速渲染2d、3d图形
优点
- 可以使用gpu的强大渲染能力
缺点
- 对浏览器版本和硬件要求较高
