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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.