Canvas 核心技术

最近项目需求中要写较多H5小游戏,游戏自己体量不是很复杂,主要是承载较多业务逻辑,因此决定用canvas来完成游戏部分。以前只是知道H5中有canvas这个东西,也知道它大概是画图的,但具体怎么用,仍是一无所知的。在MDN在看了一些相关资料,一口气也看了HTML 5 Canvas 核心技术HTML5 2D 游戏编程核心技术,对canvas H5 游戏编程有了大体的了解,发现canvas游戏编程其实挺有趣的。目前也在学习webgl相关知识,打算把前端可视化这一块也深刻学习。如今先记录一些本身认为canvas比较重要的知识,回顾和再学习。后续在记录webgl相关知识。前端

主要知识点

本系列主要深刻学习canvas 2d编程中相关比较重要和基础的知识,算是对HTML 5 Canvas 核心技术这本书的读后感,大体知识点以下:git

  1. 基础知识,学习如何绘制线段,图形,图片,文本等。
  2. 动画知识,学习如何用canvas实现简单的动画以及相关影响因素
  3. 碰撞检测,学习如何检测两个物体在运动过程当中是否发生碰撞
  4. 2D游戏开发,学习用canvas开发2D游戏
  5. canvas相关小知识点

在学习过程当中,最好是本身能动手实现,我就专门建了一个canvas demo的项目,里面都是本身在学习canvas时动手写的一些例子,感兴趣的能够去看看。github

项目仓库地址:github.com/snayan/canv…web

demo预览地址:blog.snayan.com/canvas-demo…编程

我会按照上面的主要知识点,分篇幅来学习和回顾canvas 相关的核心技术。主要以下:canvas