Partagez un plug-in qui tombe automatiquement dans les gouttelettes d'eau, Adresse de téléchargement: https://github.com/foreverjiangting/rainyday.js
Voyons comment l'utiliser? Ajoutez le code suivant pour l'exécuter.
L'effet est le suivant:
Le code est le suivant:
<! Doctype html> <html> <éadf> <style> </ style> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> </ title> <script type = "text / javascrip image = document.getElementById ("img"); image.src = "4.jpg"; image.onload = function () {// set un objet de pluie var moteur = new Rainyday ({image: this,}); // Appel The Rain Function Engine.rain ([[4,6,8000]]); // Réglez la taille de la dégsissement de 4,6 à 8000 || Peut également être moteur.rain ([[6 8000]]), à ce moment, la taille de la gouttelette d'eau est plus petit. Chargez l'image à domaine croisé} </cript> </ head> <body onload = "runImage ();" > <div> <img src = "4.jpg" id = "img"> </ div> <script type = "text / javascript" src = "rainy.js"> </ script> </ body> </html>Étudions une partie du code Rainy.js ci-dessous. Voir le code source dans GitHub ci-dessus:
Rainyday.prototype.rain = fonction (préréglages, vitesse) {// préparez le canevas pour le mappage de gouttes if (this.reflection! == this.reflection_none) {this.preparerefections ();} this.animatedrops (); // animation this.presets = presets; this.private_gravity_force_factor_y = (this.Private_gravity_force_factor_y = (this. 0,001) / 25; this.private_gravity_force_factor_x = ((math.pi / 2) - this.options.gravityangle) * (this.options.fps * 0.001) / 50; // modèle pour préparer la chute if (this.options.enableCollisions) {// calcul le plus grand droplet rond du coin de la chute de la chute de la chute de la chute de la chute = 0; 0; Math.Ceil (this.canvas.width / maxdropradius); var mhi = math.ceil (this.canvas.height / maxdropradius); this.matrix = new collisionMatrix (mwi, mhi, maxdropradius);} else {this.options.enableLisoning = false;}} pour (var i = 0; i ++) {if (! presets [i] [3]) {presets [i] [3] = -1;}} var lastExecutionTime = 0; this.adddropCallback = function () {var horodatamp = new Date (). GetTime (); if (timeSTamp - LastExecutionTime <Spee 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 correspondant var preset; pour (var i = 0; {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 = préréglage [i]; break;}} if (préset) {this.putdrop (new drop (this, math.random () * this.canvas.width, that, math.random () * this.canvas.width, that, math.random () * this.canvas.width, that, math.random () * this.canvas.width, that, math.random () * this.canvas.width, news Math.random () * this.canvas.height, prérét [0], prérét [1]));} context.save (); context.globalalpha = this.opacity; context.drawimage (this.glass, 0, 0, this.canvas.width, this.canvas.height); context.restore ();}..Ici, je tiens à mentionner la question sur les ressources croisées, image.crossorigin = "jt"; Chargement des images dans le domaine croisé. Au début, j'ai utilisé des images de domaine croisé, mais il y avait un problème, puis j'ai utilisé l'image locale pour charger, c'est-à-dire src = "4.jpg", et il n'y avait pas de problème. En fait, si vous souhaitez utiliser des images inter-domaines, ajoutez simplement Image.crossorigin = "jt" ;; le code.
(Presponse est que le serveur a activé les autorisations)
Cela implique le problème des COR, jetons un coup d'œil: le nom complet de CORS est le "partage des ressources croisées". Il permet au navigateur de croiser le serveur d'origine
La délivrance d'une demande XMLHTTPRequest surmonte la limitation que Ajax ne peut être utilisée que dans la même origine.
Nous utilisons également la colonne ci-dessus pour afficher le problème:
<! Doctype html> <html> <éadf> <style> </ style> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> </ title> <script type = "text / javascrip image = document.getElementById ("img"); image.onload = function () {// set un objet de pluie var moteur = new Rainyday ({image: this,}); moteur.rain ([[4,6,8000]]); // set la taille de la goutte de pluie 4,6 le nombre est 8000Engine.rain ([[3,3,0.88], [5,5,0,9], [6,2,1]], 100); // Définir le temps de répétition de la drague} // image.crossorigin = "jt"; // Image Cross-Domain image.src = "http://img0.imgtn.bdimg.com/it/u=938096994.3074232342&fm=21&gp=0.jpg"; } </ script> </ head> <body onload = "runImage ();" > <div> <img src = "http://img0.imgtn.bdimg.com/it/u=938096994.3074232342&fm=21&gp=0.jpg" id = "img"> </v> <script type = "text / javascript" src = "rainy.js"> </ script> </ body> </html>Jetons un coup d'œil aux informations de la console de débogage:
Acceptez l'image / png, image / *; q = 0,8, * / *; q = 0,5 accept-codage gzip, zh-cn en langage deflateaccept, zh; q = 0,8, en-us; q = 0,5, en; Q = 0,3Connection La demande provient de (Protocole + nom de domaine + port). Le serveur décide d'accepter la demande en fonction de cette valeur. Il n'est pas dans le cadre de l'autorisation. Le serveur renverra une réponse HTTP normale. Le navigateur a constaté que les informations d'en-tête de cette réponse ne contenaient pas le champ Access-Control-Allow-Origin (voir ci-dessous pour plus de détails), il a donc été connu qu'une erreur se produisait, et donc une erreur a été lancée, qui a été capturée par la fonction de rappel ONERROR de XMLHTTPREQUquest. Notez que cette erreur ne peut pas être identifiée par le code d'état, car le code d'état de la réponse HTTP peut être de 200. Get / CORS HTTP / 1.1origin: http: //api.bob.comhost: api.alice.comACGEN-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
Si le nom de domaine spécifié par Origin est dans la portée de l'autorisation, la réponse renvoyée par le serveur aura plusieurs champs d'en-tête supplémentaires.
Le contenu ci-dessus est un plug-in partagé par l'éditeur pour réaliser l'effet de chute automatique de gouttelettes. J'espère que vous l'aimez!