New here, nothing to give you, use Canvas to write a magnum boot animation for you!

Nonsense not to say, directly on the renderings!

rendering

Hello? Hello? Is anyone here? No one I also put two renderings look at it!

background

The author is a full-time developer of Canvas in the company, so he also likes the fake front end of canvas. I hope to have more in-depth sharing and communication with you about my thinking and accumulation in this aspect.

I’ve written a completely object-oriented rendering library called Janvas based on Canvas 2D. I’ve also written core implementations such as the Matrix Code Rain effects, or mind maps, which are shown online in code Rain and mind maps.

Recently see good article @hand tore red black tree big guy hongmeng boot animation CSS implementation, also think oneself write a play with JS ~ thought is roughly the same oh ~

The online demo

Try it out for yourself ~ a total of no more than 100 lines of JavaScript code implementation, CodePen online demo and source code.

So, if you want to customize the text content displayed in this animation, just change the following code:

props: {
  leftText: "Harmony".centerText: "O".rightText: "S"
},
Copy the code

Is that easy

conclusion

Is anyone interested in Canvas? Answer any questions