这是我参与12月更文挑战的第30天，活动详情查看：2021最后一次更文挑战
浏览器中画图常用的工具有：
- html+css
html+css 可以非常方便地实现一些简单的图形，但是在数据与图形的对应关系上，这种方式并不清晰，维护成本较高。
另外 css 是页面渲染的一部分，css 发生变化，可能对性能造成一定的影响。css 涉及的东西非常复杂，需要的性能开销较大，用来做绘图任务开销相对较大。
所以这种方式只适用于一些较为简单的图形。
- svg
svg 是一种基于 xml 语法的图像格式，与 html 有点像。作为专业绘图格式，它提供了很多图形元素，如圆、矩形、曲线等。另外它和 html 一样可以通过 js 进行操作，非常方便。
svg 和 html 元素一样，在输出图形前都需要经过引擎的解析、布局计算和渲染器生成，如果图形复杂，svg 元素很多，性能开销较大。另外像 svg 这种声明式的图像表现形式，不利于编程及进行细节控制，精细图形及动画的开发成本较高。
- canvas
与 svg 声明式的绘制方式不同，canvas 是一种指令式的绘制系统，也就是说需要你告诉 canvas 怎么画。
canvas 渲染非常高效，但是由于它在页面中是一个独立的画布元素，所以我们很难像操作 dom 一样对里面的元素进行精确的控制。所以我们需要根据自己的需要决定是否要选择 canvas。
- webgl
webgl 是最复杂的一种绘图方式，因为它基于 opengl 规范的浏览器实现，api 相对来说更加底层。它适用于以下的场景：
- 绘制的图形数量非常多
- 需要对图像的细节进行大量处理，如光影处理、流体效果等需要计算非常多的像素点
- 需要绘制3d物体
要使用 webgl 绘图，需要和内存、cpu、gpu 打交道，可以控制到图形输出的每个细节。
另外现在 webgpu 已经开始发力，未来有望取代 webgpu，所以如果你对 webgl 有兴趣，不妨也关注下 webgpu 的进展，它比 webgl 功能更强大。
