Share a plug-in to achieve automatic drop effect of water drops, share the plug-in water drops

Share a plug-in to achieve automatic drop effect of water drops, share the plug-in water drops

Share an automatic drop plug-in for water drops,: https://github.com/foreverjiangting/rainyday.js

Let's take a look at how to use it? Add the following code to run it.

The implementation result is as follows:

The Code is as follows:

<! Doctype html> 
Next we will study part of the rainy. js code. The source code can be found in the github above:

RainyDay. prototype. rain = function (presets, speed) {// prepare the canvas for the drop ing 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; // prepare the falling model if (this. options. enableCollisions) {// calculate the largest droplet corner var maxDropRadius = 0; for (var I = 0; I <presets. leng Th; I ++) {if (presets [I] [0] + presets [I] [1]> maxDropRadius) {maxDropRadius = Math. floor (presets [I] [0] + presets [I] [1]);} if (maxDropRadius> 0) {// initialize the Model var mwi = Math. ceil (this. canvas. width/maxDropRadius); var mhi = Math. ceil (this. canvas. height/maxDropRadius); this. matrix = new CollisionMatrix (mwi, mhi, maxDropRadius);} else {this. options. enableCollisions = false ;}}for (var I = 0; I <prese Ts. 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 (new Drop (this, Math. random () * this. canvas. width, Math. random () * this. canvas. height, presets [I] [0], presets [I] [1]); }}} else if (Math. random () <presets [I] [2]) {preset = presets [I]; break;} 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 want to mention the cross-origin resource issue, image. crossOrigin = "jt"; load cross-origin images. At the beginning, I used cross-origin images, but there was a problem. Then I loaded the images locally, that is, src = "4.jpg. In fact, if you want to use cross-origin images, you just need to add image. crossOrigin = "jt"; this code is enough.

(The premise is that the server has enabled the permitted permissions)

CORS is involved here. We can see that CORS stands for Cross-origin resource sharing ). It allows the browser to send data to a cross-source server.

The xmlhttprequest request is sent to overcome the restrictions that AJAX can only use the same source.

We also use the following columns to see the problem:

<! Doctype html> 
Let's take a look at the information in the debugging console:

Accept image/png, image/*; q = 0.8, */*; q = 0.5Accept-Encoding gzip, deflateAccept-Language zh-CN, zh; q = 0.8, en-US; q = 0.5, en; q = 0.3 Connection keep-aliveHost img0.imgtn. bdimg. comOrigin null --- in the header above, the Origin field is used to indicate the source of the request (Protocol + domain name + port ). The server determines whether to accept this request based on this value. The request is not permitted. The server returns a normal HTTP response. The browser finds that the response header does not contain the Access-Control-Allow-Origin field (For details, refer to the following section), so that an error is thrown, it is captured by the onerror callback function of XMLHttpRequest. Note: This error cannot be identified by the status code, because the HTTP response status code may be 200. GET/cors HTTP/1.1 Origin: http://api.bob.comHost: api. alice. comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0. user-Agent Mozilla/5.0 (Windows NT 6.1; rv: 46.0) Gecko/20100101 Firefox/46.0
If the domain name specified by Origin is within the permitted range, the server will return several header information fields.

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