17 | 如何使用Canvas绘制统计图表（上）？
李超
该思维导图由 AI 生成，仅供参考
Canvas 是 HTML5 标准中的一个新元素，你可以把它想像成一块“画布”，有了它你就可以在网页上绘制图像和动画了。在 HTML5 页面中可像使用其他元素一样使用 Canvas，如 Video 标签。为了能够在 Canvas 上绘图，浏览器为此提供了一整套 JavaScript API ，我们将在后面的代码中看到如何使用它们。
实际上，早期要想在浏览器的网页上实现动画效果，需要用到 Flash 技术。但通过 Flash 实现动画非常繁琐，你必须专门去学习 Flash 相关的知识。而 Canvas 则完全不用，它就是一个简单的标签，通过几行 JavaScript 代码你就可以很容易地控制它。
Canvas 最早由苹果公司开发的，用在 Mac OS X 的 WebKit 组件中。之后，各大主流的浏览器都对 Canvas 进行了支持，所以它也被纳入到了 HTML5 的规范中。
Canvas 支持 2D 和 3D 图像的绘制，并且应用领域非常广泛，基本上涵盖了 Web 图形 / 图像、视频、动画等领域。我们在网页中经常见到的统计图表、视频应用、网页游戏等等，都是由它来实现的。
基本概念和原理
在深入讲解 Canvas 之前，我们先来了解一些基础概念和原理。对于这些基础概念的理解，将会为你学习后面的知识点打下坚实的基础。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Canvas元素是HTML5新增的一个重要元素，可以用于绘制各种图形和图像。本文介绍了Canvas元素的基本概念和原理，以及图形/图像渲染的基本原理。通过讲解2D和3D图像的区别、矢量图和非矢量图的概念，以及图形/图像渲染的基本原理，为读者打下了坚实的基础。文章还详细介绍了Canvas的实现原理，包括CanvasRenderingContext2D类和WebGLRenderingContext类的作用，以及Skia库和OpenGL与WebGL的关系。通过具体的例子，展示了如何通过Canvas元素绘制图形，以及浏览器兼容性适配的相关内容。总之，本文深入浅出地介绍了Canvas元素的原理和相关技术，为读者理解WebRTC使用Canvas绘制统计图表奠定了基础。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《从 0 打造音视频直播系统》，新⼈⾸单¥59
《从 0 打造音视频直播系统》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(4)
- 最新
- 精选
tokamak思考题回答：（1）H.264视频解码后通常是YUV420P格式，可以把YUV转成RGBA，调用Canvas的2D上下文接口来逐帧显示视频。（2）或者调用Canvas的webgl上下问，直接渲染YUV数据，也可显示视频。参考案例：https://github.com/v354412101/wsPlayer作者回复: 赞！
2019-08-2215
flying LP有关于渲染的疑惑请老师指导下： 1.理解下来感觉渲染的输出就是非矢量图，类似yuv/rgb格式的像素位图，从而可以让显示器可以直接显示；而音视频通话中播放端解码后都是如yuv的一帧帧图像，应该可以直接显示；那解码后还有渲染的环节吗，作用又是什么？ 2.了解到如云游戏这种实时视频传输是通过传送图形指令实现的，如果传送的是纯图形指令，就不需要编解码的环节，而是这样的流程吗：发端视频采集--发端绘图指令--收端解指令--渲染--显示？ 新手接触，烦请不吝指导！作者回复: 无论是视频还是图片最终都是一帧一帧的图像放到屏幕上显示，所以都有渲染问题。所谓的渲染问题就是如何更高效的，更快速的将图像显示出来。一般情况下我们都使用 GPU加速渲染。 对于你说的第二个问题，你想你是理解错了，目前的视频还无法通过几条指令就可以将原图复原，像Google都做不到，我觉得你应该对这家公司的技术再做一些深入了解。
2020-06-1422
许童童思考题： 可以通过canvas来解析渲染二进制流，根据视频的编码方式，选择相应的解码方式即可。 这一节讲的内容还是挺基础的，不过正好复习一下。2019-08-224
LWP纯干货，清晰易懂，点赞2020-02-25
收起评论
