If autumn is very beautiful, there must be nine points in the North!

When autumn comes, the beauty of mountains and seas surges, making you overwhelmed! There are colorful roads, all plants and trees can be painted, and there are natural landscape galleries everywhere.

HTML canvas is widely used in games and complex image visualization. However, as websites and applications push canvas rendering to the limit, performance becomes a problem.

Here are some suggestions to improve performance:

Pre render similar shapes or duplicate objects on off screen canvas

When we find that there are many complex drawing operations in every frame, please consider creating an off screen canvas, drawing the image on this canvas once (or every time the image changes), and then drawing the canvas beyond the line of sight on each frame.

myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);

In 2D environment, the common collision detection methods are as follows:

External figure discrimination

• Axisymmetric bounding box, i.e. rectangle without rotation.
• Circular collision
• Circle and rectangle (no rotation)
• Circle and rotation rectangle (with the center of the rectangle as the rotation axis)

Ray casting method

Separation axis theorem

Other people

• Map grid division
• Pixel detection

The following will introduce the above mentioned collision detection methods from easy to difficult order: external graph discrimination > other > ray casting > separation axis theorem.

Mark is a practical figure - regular polygon.

After learning the calculation of circular motion, I suddenly got a flash of inspiration

I have a hobby, that is photography! Why don't I use this way to achieve a star orbit effect!!!