Share a plugin to realize the _javascript skill of the drop effect of water droplets

Share a drop of water falling automatically plugin, download address: https://github.com/foreverjiangting/rainyday.js

Now let's see how to use it? Add the following code to run it.

The implementation effect is as follows:

The code is as follows:

<! DOCTYPE html>
 
 

Below to study the next rainy.js part of the code, the source code see above GitHub inside:

RainyDay.prototype.rain = function (presets, speed) {//Prepare canvas for drop mapping if (this.reflection!== this.
Reflection_none) {this.preparereflections ();} this.animatedrops ();
Animation this.presets = presets; This.
Private_gravity_force_factor_y = (This.options.fps * 0.001)/25; This.
private_gravity_force_factor_x = ((MATH.PI/2)-this.options.gravityAngle) * (this.options.fps * 0.001)/50; Ready to drop the model if (this.options.enableCollisions) {//Calculate the largest drop of droplet fillet var Maxdropradius = 0; for (var i = 0; i < Presets.lengt H
i++) {if (presets[i][0] + presets[i][1] > Maxdropradius) {maxdropradius = Math.floor (presets[i][0] + presets[i][1]); } if (Maxdropradius > 0) {//initialization drop model var MWI = Math.ceil (This.canvas.width/maxdropradius); var mhi = math.ceil (th
Is.canvas.height/maxdropradius);
This.matrix = new Collisionmatrix (MWI, MHI, Maxdropradius);
else {this.options.enableCollisions = false;}} for (var i = 0; i < presets.length i++) {if (!presets[i][3)) {presets[i][3] =-1;}} var Lastexecutiontime = 0;
This.adddropcallback = function () {var timestamp = new Date (). GetTime (); if (Timestamp-lastexecutiontime < speed) {
Return
} lastexecutiontime = timestamp;
var context = This.canvas.getContext (' 2d ');
Context.clearrect (0, 0, this.canvas.width, this.canvas.height);
Context.drawimage (this.background, 0, 0, this.canvas.width, this.canvas.height);
Select the matching model var preset;  for (var i = 0; i < presets.length i++) {if (presets[i][2) > 1 | | presets[i][3] = = 1) {if (presets[i][3)!== 0) {presets[i][3]--for (var y = 0; y < presets[i][2]; ++y) {This.putdrop (The new Drop (this, math.random () * THIS.CANVAS.W
Idth, Math.random () * this.canvas.height, presets[i][0], presets[i][1]);
}} else if (Math.random () < presets[i][2]) {preset = presets[i]; if (preset) {this.putdrop, new Drop (This, math.random () * this.canvas.width, Math.random () * This.canvas.height, preset[0
], preset[1]);
} context.save ();
Context.globalalpha = this.opacity; Context.dRawimage (this.glass, 0, 0, this.canvas.width, this.canvas.height);
Context.restore ();
}. Bind (this);  };

Here I would like to refer to the issue of Cross-domain Resources, image.crossorigin= "JT"; Loads a cross domain picture. At first I used a cross-domain picture, but there was a problem, and then I use the local picture load, that is, src= "4.jpg", there is no problem. In fact if you want to use a cross-domain picture, just add image.crossorigin= "JT"; This code is OK.

(provided that the server has permission to open)

This involves cors, let's look at the following: Cors full name is "cross-domain resource sharing" (cross-origin resource sharing). It allows browsers to cross source servers

A XMLHttpRequest request is made to overcome the limitation that Ajax can only be used with homology.

We also use the above to look at the problem:

<! DOCTYPE html>
 
 

Let's look at the information inside the Debug console:

Accept 
image/png,image/*;q=0.8,*/*;q=0.5
accept-encoding 
gzip, deflate
accept-language 
zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Connection 
keep-alive
Host 
img0.imgtn.bdimg.com
Origin NULL---The header information above, the Origin field is used to indicate which source (protocol + domain + port) This request originated from. The server decides whether to agree to this request according to this value. Not within the scope of the license. The server returns a normal HTTP response. The browser found that the header information for this response did not contain the Access-control-allow-origin field (see below) and that a mistake was made to throw an error that was captured by the XMLHttpRequest OnError callback function. Note that this error cannot be identified by the status code, because the status code of the HTTP response may be 200. Get/cors http/1.1
origin:http://api.bob.com
Host:api.alice.com
accept-language:en-us
Connection:keep-alive
user-agent:mozilla/5.0. User-agent 

If origin specifies a domain name within the license range, the server returns a few more header information fields.

The above content is a small series to share a plug-in to achieve the automatic drop of water drops effect, I hope you like!