01 | 浏览器中实现可视化的四种方式
该思维导图由 AI 生成，仅供参考
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
浏览器中实现可视化的四种方式包括传统的HTML+CSS、SVG、Canvas2D和WebGL。HTML+CSS适用于常规图表展现，但性能开销较大。SVG适用于绘制矢量图形，但也存在性能问题。Canvas2D和WebGL更适合处理大量数据展现和对视觉效果要求高的特殊场景。Canvas2D是指令式的绘图系统，能够直接操作绘图上下文，性能比HTML/CSS和SVG更快。WebGL基于OpenGL ES规范，适用于绘制大量图形、像素处理和3D物体。总的来说，Canvas2D和WebGL在处理大量数据展现和对视觉效果要求高的特殊场景中具有优势。读者可以根据具体项目特点选择合适的方案实现可视化。文章还提到了SVG版本的柱状图实现，读者可以尝试用SVG实现其他图表，以及预习Canvas2D绘制可视化图表。
《跟月影学可视化》，新⼈⾸单¥68
全部留言(33)
- 最新
- 精选
Meow戴canvas2d绘制出来的图形最终也是渲染到gpu中的吧，和webgl渲染到底区别在哪里，为啥webgl性能好啊，请问月影团长～～作者回复: 这个问题问得挺好的，说明自己思考了。我之前也有疑问。不过后来我自己尝试实践了一下，发现是因为canvas2d渲染只能由浏览器底层控制，并不能自己控制gpu，而很多优化其实浏览器并不能代替开发者去做。比如说同时绘制几万个小圆形，因为图形都一样，自己写webgl的话，可以用instanced drawing的方式批量绘制，而canvas2d写浏览器不会帮你去这么做。可以说webgl在渲染大量元素的时候手段要更多得多，所以性能差别就明显了。你可以看我spritejs的文档中的示例https://spritejs.org/demo 里面的benchmark子目录下的例子，里面有几个用canvas2d无法实现的case。
2020-06-23585
工号996Canvas绘出圆形颜色渐变的倒计时图形有种朦胧感，怎么回事作者回复: 这个问题很好。这个牵扯到设备像素比dpr了。我们知道mac和iphone的dpr是2，也就是说一个如果你在这样的设备上绘制canvas，应当将它的画布坐标设置为样式坐标的2倍，才可以清晰地显示图像。浏览器的window.devicePixelRatio属性可以读取设备像素比。
2020-06-2433
皮特尔
Canvas 是不是有5M的大小限制？这个问题怎么解决呢？作者回复: Canvas画布大小有限制，不同的浏览器不同，最新的Chrome下应该是不超过16384 X 16384，单个宽高不超过 32767像素，一般的可视化大屏足够用了。检测设备的Canvas大小可以用这个项目：https://github.com/jhildenbiddle/canvas-size
2020-06-2818
浮生若梦canvas和webgl都是GPU绘图，但是他们在代码中都是以js的形式来写的。那么首先需要解析js然后才能绘制，这里是CPU在起作用。但是后期更改图像（js代码）的时候，还是纯GPU操作吗？会不会插入js的CPU操作，最后绘制才进入GPU操作？相比html和css只是少了前期布局和绘制的步骤，因为浏览器最后将html和css的图像展现在页面最终也是会到GPU里。另外，threejs中的shader貌似比一般的threejs（如精灵）效果更好，这又是什么原理呢？作者回复: canvas2d绘图是通过自身的api，gpu是浏览器底层调用的，不受开发者控制。webgl不一样，将数据写入帧缓冲之后，最终通过WebGLProgram来执行shader完成图形渲染，所以webgl能够自己控制gpu渲染。有很多图形计算，webgl是可以放在shader里面去计算的，这样比用js计算快，这就是gpu和cpu计算的区别。另外为什么threejs的自定义的shader会更好，也是因为我们可以在shader中完成一些计算，还有threejs精灵默认的shader是根据材质生成的，里面的计算也是依照一些规则来给出的。自定义shader更灵活。
2020-06-23215- gltjk按老师的建议用 <path> 重构了 SVG 饼图（不过由声明式变成了命令式😂），同时把数据与视图分离了。https://codepen.io/gltjk/pen/vYLmdvJ
作者回复: 写得挺好的呀。声明式和指令式只是和图形系统本身特性有关，是相对而言的。这里这个具体问题即使用svg也可以用指令式的思路来写，总体挺好的
2020-06-24410 
奕Canvas 2D 和 WebGL 都是 Canvas API 的一种上下文， 那么 Canvas API 到底有多少中上下文 API 呢？ 还有问题就是 Canvas API 是不是就是一个接口规范， Canvas 2D 和 WebGL 只是其中的一种实现？作者回复: 现在浏览器的canvas一般有webgl2、webgl和2d三种上下文。它们并不是一个完整的canvas api规范，而是分成了2d规范和webgl规范。webgl规范是opengl es规范在web端的实现，其中webgl2对应opengl es 3.0，而webgl对应的是opengl es 2.0。
2020-06-237
陈启年在使用HTML+CSS实现可视化章节中，月影说“从 CSS 代码里，我们很难看出数据与图形的对应关系”。那么使用variable还是能做到对应关系的，比如： .bargraph div{ // 初始值 --start: 100%; --end: 100%; background-image: linear-gradient( to top, pink var(--start), orange 0, orange var(--end), transparent 0 ); 有几个问题请教： 1，background-image无法使用transition，动画很硬； 2，柱子内部是画出来的，子色块无法交互； 3，数据项不定的情况下，没办法在css中以字面量去定义，只能在js中写一堆css；作者回复: css代码里很难直观看出数据的对应关系，用var和calc是可以解决一部分问题，不过还是比较麻烦。 1没有特别好的办法，可以用js或者用css预处理器来解决。 2也确实是如此，所以一般可视化不用html/css，只有最简单的存展示类的才用一下。 3的话动态数据项自然没法直接用css属性定义，用编译工具结合预处理器可以做，比较麻烦，估计还是要依靠css 所以结论就是html/css在可视化中适应很少，但是可以用来展示一些简单的图表，一般适合静态展示。
2020-06-246
啊啊啊黑猫警长图形中运用到的数学知识,除了后面要讲的以外.平时应该通过什么来学习积累呢.典型案例吗作者回复: 可以系统地看一些资料，这里推荐油管上3blue1brown大神的视频。
2020-06-234
KeilingZhuang请问canvas是间接控制GPU渲染，webGL是直接控制GPU渲染吗？作者回复: 是的
2020-08-103
温润玉请问月影老师对WebXR这种新技术有什么看法呢？非常感谢╰(*´︶`*)╯作者回复: 前沿技术只要有兴趣我还是鼓励大家多关注的。而且这些技术与可视化也能紧密结合。
2020-06-273