Recently, there are many H5 mini-games to be written in the requirements of the project. The game itself is not very complex and mainly carries a lot of business logic, so WE decide to use canvas to complete the game. Before, I only knew that CANVAS is used in H5 and it is used for drawing, but I still knew nothing about how to use it. I read some relevant materials in MDN, and also read HTML5 Canvas core technology and HTML5 2D game programming core technology in one breath. I have a general understanding of Canvas H5 game programming, and found that Canvas game programming is actually quite interesting. Currently, I am also learning webGL related knowledge, and I plan to further study front-end visualization. Now I will first record some important knowledge of Canvas for review and further study. Webgl related knowledge will be recorded later.

Main knowledge points

This series mainly focuses on the in-depth study of important and basic knowledge of Canvas 2D programming, which can be regarded as the afterreading of THE BOOK CANVAS Core technology of HTML 5. The general knowledge points are as follows:

  1. Basic knowledge, learn how to draw line segments, graphics, pictures, text, etc.
  2. Animation knowledge, learn how to use Canvas to achieve simple animation and related influencing factors
  3. Collision detection, learn how to detect whether two objects in the process of motion collision
  4. 2D game development, learn to use Canvas to develop 2D games
  5. Canvas related tips

In the process of learning, it is better to realize it by yourself. I specially built a Canvas Demo project, which is filled with some examples written by myself when learning canvas. If you are interested, you can go and have a look.

Project warehouse address: github.com/snayan/canv…

Demo preview address: blog.snayan.com/canvas-demo…

According to the main knowledge points above, I will study and review the core technologies related to Canvas in part. Mainly as follows:

  • Canvas Core Technology – How to draw line segments
  • Canvas Core Technology – How to draw graphics
  • Canvas Core Technology – How to picture and text
  • Canvas Core Technology – How to implement simple animation
  • Canvas Core Technology – How to achieve complex animation
  • Canvas Core Technology – How to implement collision detection
  • Canvas Core Technology – How to implement a simple 2D game engine
  • Canvas Core technology – Width and height, gradient, draw real 1px line segment
  • Canvas core techniques – vectors, trigonometry