The rain animation produced by Canvas and the rain animation by canvas

The rain animation produced by Canvas and the rain animation by canvas

Introduction

It is interesting to see a Canvas rain effect animation on codepen. I have studied it. Here I will share my implementation skills.

Effect:

Canvas animation Basics

As we all know, Canvas is actually just a Canvas. We can use the canvas api to draw various images on it.

The Canvas 2D API: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

The Canvas animation is as follows:

1. Draw the first frame (drawing using API)
2. Clear the canvas (apply clearRect () or fillRect ())
3. Draw next Frame Animation

What is used to control the rendering time of each animation frame? You can easily think of window. setInterval () and window. setTimeout (). Yes, you can use both of them. In addition, a new method is displayed: window. requestAnimationFrame (callback ).

RequestAnimationFrame tells the browser that you want to draw an animation. Let the browser call your specified method (callback) when re-painting to draw your animation.

The usage is as follows:

function anim() {    ctx.fillStyle = clearColor;    ctx.fillRect(0,0,w,h);    for(var i in drops){        drops[i].draw();    }    requestAnimationFrame(anim);}

Generally, the requestAnimationFrame is used first to ensure that the animation painting frequency is the same as that of the browser. Unfortunately, the compatibility of requestAnimationFrame is not very good. This attribute does not appear to be supported under IE9 and below addroid 4.3. Unsupported browsers must use setInterval or setTimeout for compatibility.

Raindrops fall

First, let's talk about how the effects of raindrops fall. The raindrops are actually a rectangle and then add a shadow. The rendering of the shadow is the key to the falling of raindrops. A shadow creates a translucent background and a rectangle at each frame in the forward direction. As the drawing in the forward direction is drawn at the end, it looks bright, and there are many overlapping images in the back, so it is visually weakened. The whole looks like a shadow. The key is to draw a background with transparency. Otherwise, the overlay effect will not be produced.

Let's draw a raindrops. First, prepare a canvas:

Html code:

<! DOCTYPE html> 
I draw an animation (raindrop. js) in the js file. The Code is as follows:
Var c = document. getElementById ("canvas-club"); var ctx = c. getContext ("2d"); // obtain the canvas context var w = c. width = window. innerWidth; var h = c. height = window. innerHeight; // set the canvas width and height var clearColor = 'rgba (0, 0, 0 ,. 1) '; // canvas background. Note that the final transparency is 0.1, which is the basic function random (min, max) {return Math. random () * (max-min) + min;} function RainDrop () {}// the raindrops object is the key to drawing the raindrops animation. prototype = {init: function () {this. x = random (0, w); // The Position of the raindrops x this. y = 0; // The Position of the raindrops y this. color = 'hsl (180,100%, 50%) '; // fill color of the rain color rectangle this. vy = random (4, 5); // The falling speed of raindrops this. hit = random (h *. 8, h *. 9); // The maximum value of this. size = 2; // rectangular width}, draw: function () {if (this. y <this. hit) {ctx. fillStyle = this. color; ctx. fillRect (this. x, this. y, this. size, this. size * 5); // draw a rectangle. By adding a rectangle multiple times, the raindrops fall.} this. update (); // update location}, update: function () {if (this. y <this. hit) {this. y + = this. vy; // If the bottom is not reached, add the y coordinate of the raindrops} else {this. init () ;}}; function resize () {w = c. width = window. innerWidth; h = c. height = window. innerHeight;} // initialize a raindrops var r = new RainDrop (); r. init (); function anim () {ctx. fillStyle = clearColor; // each frame is filled with the background color ctx. fillRect (, w, h); // fill in the background color. Be sure not to use clearRect. Otherwise, the raindrops in front will be cleared, so that no overlapping effect can be produced. draw (); // draw the raindrops requestAnimationFrame (anim); // control the animation frame} window. addEventListener ("resize", resize); // start the animation anim ();
Ripple Effect
Then draw the ripple effect. Similar to the method of drawing the raindrops, the background with transparency is used to overlay the previous image to produce the inner shadow effect.
The Code is as follows (rippling. js ):
Var c = document. getElementById ("canvas-club"); var ctx = c. getContext ("2d"); // obtain the canvas context var w = c. width = window. innerWidth; var h = c. height = window. innerHeight; // set the canvas width and height var clearColor = 'rgba (0, 0, 0 ,. 1) '; // canvas background. Note that the final transparency is 0.1, which is the basic function random (min, max) {return Math. random () * (max-min) + min;} function Rippling () {}// ripple object this is the main part of Rippling animation. prototype = {init: function () {this. x = random (0, w); // ripple x coordinate this. y = random (h *. 8, h *. 9); // ripple y coordinate this. w = 2; // elliptical ripple width this. h = 1; // elliptical ripple height this. vw = 3; // width increase rate this. vl = 1; // high growth rate this. a = 1; // transparency this. va =. 96; // gradient speed of Ripple disappearance}, draw: function () {ctx. beginPath (); ctx. moveTo (this. x, this. y-this. h/2); // draw the right arc ctx. bezierCurveTo (this. x + this. w/2, this. y-this. h/2, this. x + this. w/2, this. y + this. h/2, this. x, this. y + this. h/2); // draw the left arc ctx. bezierCurveTo (this. x-this. w/2, this. y + this. h/2, this. x-this. w/2, this. y-this. h/2, this. x, this. y-this. h/2); ctx. strokeStyle = 'hsla (180,100%, 50%, '+ this. a + ')'; ctx. stroke (); ctx. closePath (); this. update (); // update coordinates}, update: function () {if (this. a>. 03) {this. w + = this. vw; // increase the width of this. h + = this. vl; // high growth if (this. w> 100) {this. a * = this. va; // when the width exceeds 100, the ripple fades out gradually. this. vw * =. 98; // The width increases slowly this. vl * =. 98; // high growth slows down} else {this. init () ;}}; function resize () {w = c. width = window. innerWidth; h = c. height = window. innerHeight;} // initialize a ripple var r = new Rippling (); r. init (); function anim () {ctx. fillStyle = clearColor; ctx. fillRect (0, 0, w, h); r. draw (); requestAnimationFrame (anim);} window. addEventListener ("resize", resize); // start the animation anim ();
Summary
In this way, you should have some knowledge about how to make the rain effect. Canvas is used to draw the animation effect, which can make people shine, and improve the visual effect of the web. Start your own wisdom and believe that you can make more wonderful animations. This is one of the reasons why I like web more and more ~~.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.