自動的に水滴を落とすプラグインを共有します。
使い方を見てみましょうか？次のコードを追加して実行します。
効果は次のとおりです。
コードは次のとおりです。
<！doctype html> <html> <head> <style> </style> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> function runimage（）{var image = document.getElementById（ "img"）; image.src = "4.jpg"; image.onload = function（）{//雨のオブジェクトvarエンジン= new rainyday（{image：this、}）; //雨関数Engine.rain（[[4,6,8000]]]）また、エンジンになることができます（[[[6,8000]]]））、この時点で水液滴のサイズはエンジン（[3,3,0.88]、[5,5,0.9]、[6,2,1]]、100）;クロスドメイン画像をロード} </script> </head> <body onload = "runimage（）;" > <div> <img src = "4.jpg" id = "img"> </div> <script = "text/javascript" src = "rainy.js"> </script> </body> </html>rainy.jsコードのいくつかを以下に研究しましょう。上記のgithubのソースコードを参照してください。
rainyday.prototype.rain = function（presets、speed）{//ドロップマッピングのためにキャンバスを準備するif（this.reflection！== this.reflection_none）{this.preparereflections（）; * 0.001）/ 25; this.private_gravity_force_factor_x =（（math.pi/ 2）-this.options.gravityangle） *（this.options.fps * 0.001）/ 50; //モデル0;（var i = 0; i <presets.length; i ++）{if（presets [i] [0] + presets [i] [1]> maxdropradius）{maxdropradius = math.floor（presets [i] [0] + presets [i] [1];}} if（Maxdradius> varize birtius> barize birtius bisise birtius bise Math.ceil（this.canvas.width / maxdropradius）; var mhi = math.ceil（this.canvas.height / maxdropradius）; this.matrix = new CollisionMatrix（MWI、MHI、MAXDROPRADIUS）; presets.length; i ++）{if（！presets [i] [3]）{presets [i] [3] = -1;}} var lastexecutiontime = 0; 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）; {if（presets [i] [2]> 1 || presets [i] [3] === -1）{if（presets [i] [3]！== 0）{presets [i] [3] - ; for（var y = 0; y <press [i] [2]; ++ y）{this.putdrop（this math.） Math.random（） * this.canvas.height、presets [i] [0]、presets [i] [1]）;}} else if（math.random（）<presets [i] [2]）{preset = presets [i];}} if（preset）{this.putsdrop（this drop. * this.random（） 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）;ここでは、クロスドメインリソース、image.crossorigin = "jt"についての質問に言及したいと思います。クロスドメイン画像の読み込み。最初はクロスドメインの写真を使用しましたが、問題がありました。その後、ローカル画像を使用してロードしました。つまり、src = "4.jpg"で、問題はありませんでした。実際、クロスドメイン画像を使用する場合は、画像を追加するだけです。crossorigin= "jt" ;;コード。
（Presponseは、サーバーが権限を有効にしていることです）
これにはCORSの問題が含まれます。CORSのフルネームは「クロスオリジンリソース共有」です。これにより、ブラウザがサーバーをクロスすることができます
XMLHTTPREQUESTリクエストを発行すると、AJAXは同じ起源でのみ使用できるという制限を克服します。
また、上記の列を使用して問題を表示します。
<！doctype html> <html> <head> <style> </style> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <script type = "text/javascript"> function runimage（）{var image = document.getElementById（ "img"）; image.onload = function（）{//雨のオブジェクトvar enegine = new Rainyday（{image：this、}）; Engine.rain（[[4,6,8000]]））; //雨滴サイズ4,6 8000ENGINE.RAIN（[[3,3,0.88]、[5,5,0.9]、[6,2,1]]、100）; //雨滴繰り返し時間を設定} // image.crossorigin = "jt"; // Cross-Domain Image 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"> </div> <スクリプト= "テキスト/Javascript" " src = "rainy.js"> </script> </body> </html>デバッグコンソールの情報を見てみましょう。
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.3Connection Keep-AliveHost IMG0.imgtn.Bdimg.comorigin null-リクエストは（プロトコル +ドメイン名 +ポート）からのものです。サーバーは、この値に基づいてリクエストに同意するかどうかを決定します。許可の範囲内ではありません。サーバーは通常のHTTP応答を返します。ブラウザは、この応答のヘッダー情報にアクセス制御コントロールオリジンフィールドが含まれていないことを発見したため（詳細については以下を参照）、エラーが発生したため、エラーがスローされ、XMLHTTPREQUESTのONERRORコールバック関数によってキャプチャされました。 HTTP応答のステータスコードは200である可能性があるため、このエラーはステータスコードで識別できないことに注意してください。GET/CORS HTTP/1.1ORIGIN：http：//api.bob.comhost：api.alice.comcept-language：en-usconnection：Keep-Aliveuser-Agent：Mozilla/5.0。ユーザーエージェントMozilla/5.0（Windows NT 6.1; RV：46.0）Gecko/20100101 Firefox/46.0
Originで指定されたドメイン名が許可範囲内である場合、サーバーによって返される応答にはいくつかの追加のヘッダーフィールドがあります。
上記のコンテンツは、編集者が共有するプラグインで、自動液滴液滴の落下効果を実現します。気に入っていただければ幸いです！