开始之前

1. 前言

今天开始,由我带领大家进入 canvas 的世界,开始之前,我们需要明白这几个问题。

2. 教程和官方文档有什么区别?

官方文档中案例较少,而且好多内容对初学者不太友好,官方文档更多的作用是作为手册使用,而不是作为初学者入门学习的资料。

举个例子来说就是,我们刚开始学习英语,肯定是先从一年级课本开始学习,而不是一开始就拿着一本牛津字典去学习。

3. 遇到问题随时都可以搜索,为什么还要系统地学习?

系统学习 canvas 的意义在于:

  1. 可以对 canvas 的掌握达到一个更高的境界,也就是从整体、全局和联系中去掌握具体的概念和原理,使所学的概念和原理回到知识系统中应有的位置上去。
  2. 能把多而杂的 canvas 知识点变得少而精,从而完成 canvas 内容由“多”到“少”的转化过程。而且系统化的知识,容量大,好记又好用。
  3. 系统地学习 canvas 更有利于记忆, 道理很简单,单个知识点容易忘记, 而联系起来的事物就不容易忘记。

4. 适合群体

本篇Wiki主要为 ECMAScript262 第五版内容,适合初学者学习或者进行知识点查阅。

5. 前置知识

章节中的例子可能会涉及部分 HTMLCSS 的知识点,所以需要了解或者掌握一些 HTMLCSS 相关的内容作为前置知识。

6. 目前 canvas 主要应用场景

目前 canvas 主要应用场景有:

  1. 游戏:canvas 是基于 web 的,在图像显示方面比 Flash 更加地立体、更加地精细,而且 canvas 游戏在流畅度和跨平台方面更加地擅长。
  2. 制作酷炫的可视化图表。目前国内开源的框架有:百度的echarts
  3. 制作酷炫的动画效果。例如宣传片、广告片等的制作。
  4. 后期 canvas 的版本迭代只会更牛逼,完全可以取代 Flash。

7. canvas 相关知识那么多,我们的课程主要讲什么?

本套课程主要针对刚入前端不久的小白或者想要系统学习 canvas 的同学,内容以基础课程为主,全面系统地讲解 canvas 相关知识点,再搭配上和知识点相关的案例来做说明,可以让同学们更好地体会到 canvas 的强大以及乐趣所在。

8. 总结

本套课程的最终目的是让每一个学习者都能熟练地使用 canvas,牢牢地打好 canvas 相关基础,为以后的前端之路奠定坚实的基础。