经过第 1 节的介绍,你应该了解
- Canvas 的介绍
- Canvas 提出的背景
- Canvas 和其他在 Web 中显示图像的技术的区别
你应该已经明白 Canvas 究竟是什么和 Canvas 的大致用途。(づ。◕‿‿◕。)づ
这一节将为你展示 30+ 个 Canvas 实例,让你感受下 Canvas 的强大作用。
绘制图表
绘制图表应该是 Canvas 最为实用的功能之一了吧(๑•̀ㅂ•́)و✧
因为 Canvas 通过 JavaScript 可以动态传入参数绘制图形,所以我们可以使用 Canvas 作为容器,通过 JavaScript 动态传入的参数将数据以图表的形式显示出来。
不仅显示更为方便,而且修改数据也同样的简单。同时也可以有一些简单的动画和交互效果,对于可视化的数据展示更为友好。
这些都是传统的 png/jpg 静态显示图片所不能比拟的。
现在的一些数据可视化的 js 库(如 ECharts)大部分都是使用 Canvas 实现的。
小游戏
如今人们使用手机的频率越来越高,因此用浏览器打开网址就可以玩的游戏越来越受到开发者和用户的喜爱。
而 Canvas 因其独特的性质可以说是 Web 游戏的不二之选,基本上所有的 HTML5 游戏引擎都是基于 Canvas 开发的。那么为什么会使用 Canvas 来开发游戏呢?
首先是因为 Canvas 不需要借助任何插件就可以在网页