How canvas implements github404 dynamics

This time I will show you how to implement github404 dynamics with canvas. What are theprecautionsfor using canvas to implement github404 dynamics? Here are practical cases, let’s take a look.

A few days ago, I used css style and js to pay tribute to the similar interface of github404. At the same time, I recently came into contact with canvas. With the idea of messing around, I used the previous js algorithm to complete it using canvas. Dynamic effects of github404.

File resources

File source code andPicturesThe

code is given at the end of the article

The body part of the webpage

Here, define the width and height of canvas and set it as a block-level element. These img tags load these images, so we don’t need to load them in js, and then set the images not to be displayeddisplay:none.

  您的浏览器不支持canvas          

js part

1. Here I still created a new json object named github404 to encapsulate all parameters and methods

2. Create an imgData object again, and pass all the parameters required for img into ps:top and left for positioning in the drawImage() method. The scale parameter is used to calculate the corresponding picture movement when the mouse moves

3. The init() method is used for initialization and is the interface with the outside

4. The implementation of the drawing method is to use the for in loop to traverse imgData[], then assign values in sequence, and finally use the drawImage() method to draw, just In the mobile drawing method, you need to pay attention to using the ctx.clearRect() method to clear the canvas first.

Summary

This time I used canvas to complete this dynamic effect, which made me understand more about the usage of canvas. At the same time, it gave me a deeper understanding of how to use json objects to encapsulate data and methods, and how to organize code.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

The above is the detailed content of How canvas implements github404 dynamics. For more information, please follow other related articles on the PHP Chinese website!