10 amazing HTML5 Canvas (CANVAS) technology application

Here are 10 HTML5 canvas (canvas) Technical effects demos that will definitely amaze you. Of course, you might also think that the flash technology used in old browsers can do the same. However, the following demos only use the technology in a modern browser, with no need for plug-ins such as Flash or Silverlight. The reduction of this technical threshold will create an indispensable prerequisite for the popularization and prosperity of these technologies.

(Hint: Use Google browser best effect)

01. The wind is so big, blow my hair

This is the same as my favorite demo, because there is a very cute little girl, it seems that the popularity of the more people can be tempted to. If you like the little girl, move your mouse and let the wind blow its hair in all directions.

→ Watch Demo

02. Tear Cloth Sheet

This demo of tearing up the sheets has been a big star on the internet in the past few months. Use your mouse to drag on this mesh sheet, you will find it animation effect is very smooth, and the completion of these effects is only a small piece of code, presumably it has let you marvel. However, not only these, this animation can also respond to your drag and drop the intensity and speed, according to different strength, showing different tearing effect, enough magical, perfect HTML5 canvas function embodiment.

→ Watch Demo

03. Phantom text

This demo is more complicated. After using a lot of computations, the author presents us with a highly complex animation. You can see from the screen the Helvetica letter constantly creeping and changing, decomposition and reorganization, you can also use the mouse to change the angle of view. This demo is perfect for relatively old hardware, thanks to the full use of the modern browser's self-contained technology.

→ Watch Demo

04. Buddha Shines

This demo can be described as a typical representation of HTML5 canvas (canvas) technology applications. In the demo, you can change the direction of the light by using a dash. All the light and reflection are real-time, and a few simple lines can create an unexpected beauty.

→ Watch Demo

05. Multicolored Colors

This demo uses a variety of colors, positions, connectors, and transparency, and when you click on the canvas with your mouse, you see the effect of the wave. The movement is very smooth.

→ Watch Demo

06. Particle Wave

In this demo move your mouse, you will find those dots like always and you keep distance of the elves, you move them out of the way, you go, they converge. Like a watermark, like a grain of sand. It's an interesting production.

→ Watch Demo

07. Cycling Games

To say HTML5 's canvas technology, we can't help but say some game making. HTML5 's canvas technology provides an excellent platform for future web game production, and this simple but wonderful bike game shows us the power of HTML5 canvas.

→ Watch Demo

08. Automobile

This demo is very similar to the one on the bike above. You can see that it has all the elements of a game. Collision effect, the effect of acceleration of gravity on object motion, concurrency control of multiple objects and so on, these are implemented with simple HTML and JS.

→ Watch Demo

09. Gesture Control Slide Play

This demo is a more sophisticated modern browser advanced experience, called Gesture + reveal.js, which uses WEBRTC and JavaScript to invoke the camera, and currently only use Google browser to run correctly. This technique provides the user with a gesture-operated interface that allows you to use gestures to flip the command slides up or down. The gesture is not a touch-screen gesture on a mobile phone, but a camera connected to your computer to see how you can turn the page by waving your hands in the air. Of course this control is not new, but again, because it is implemented with pure html+javascript, so it works perfectly on any computer that has been produced in the last 5 years.

→ Watch Demo

10. Smash Video

This is definitely one of the most eye-catching demonstrations here-a bizarre rendering of a video mirror blasting effect. When you click on the video screen in play, the picture will break into pieces and scatter away, and even more wonderfully, the fragments of the broken picture still play the part of the image that it should have, and soon all the pieces will gather again. It's a fantastic thought.