Canvas渲染的优势

Posted 2021-06-14 张驰Terry

最新的 Google Docs 博客新闻显示，Google Docs 将在今年逐渐将其文档产品从DOM技术排版迁移为 Canvas排版，那 Canvas 究竟有哪些优势呢？

canvas

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画，也会提供一些代码片段来帮助你开始构建自己的内容。<canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

https://docs.corp.kuaishou.com/image/api/external/load/out?code=fcAA4l5yToL8PgPOhJZ7aTDqI:-6498639065099716553:1622348133717

canvas 适用场景

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制

canvas 优点

（在元素特别多的情况 1000+）：

• 性能高，可以自己控制绘制过程，还能使用 WebGL
• 可控性高，像素级控制
• 内存占用恒定，就是像素点个数
• 从操作对象上说，Canvas是基于html canvas标签，通过宿主提供的javascript API对整个画布进行操作的，