شارك المكون الإضافي الذي يسقط تلقائيًا قطرات المياه ، عنوان التنزيل: https://github.com/foreverjiangting/rainyday.js
دعونا نرى كيفية استخدامه؟ أضف الكود التالي لتشغيله.
التأثير على النحو التالي:
الرمز كما يلي:
<! doctype html> <html> <head> <style> </sytor> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> </title> <script type = "text/javascript"> Image = document.getElementById ("img") ؛ image.src = "4.jpg" ؛ image.onload = function () {// تعيين كائن Rain var engine = new Rainyday ({Image: this ،}) ؛ // استدعاء محرك Rain Function.Rain ([[4،6،8000]]) ؛ // اضبط حجم قطرة المطر من 4،6 إلى 8000 || يمكن أن يكون المحرك أيضًا ([[6،8000]]) ، في هذا الوقت حجم قطرة الماء هو محرك أصغر. التحميل ([[3،3،0.88] ، [5،5،0.9] ، [6،2،1] ، 100) ؛ // تعيين وقت تكرار قطر المطر} // image.crossorigin = "JT" ؛ قم بتحميل صورة النطاقات المتقاطعة} </script> </head> <body Onload = "RunImage () ؛" > <viv> <img src = "4.jpg" id = "img"> </viv> <script type = "text/javaScript" src = "rainy.js"> </script> </body> </html>دعنا ندرس بعض كود Rainy.js أدناه. انظر رمز المصدر في جيثب أعلاه:
Rainyday.Prototype.Rain = function (presets ، السرعة) {// إعداد قماش لرسم الخرائط للانخفاض إذا (this.reflection! == this.reflection_none) {this.preparereflections () ؛} this.animatedRops () ؛ / 25 ؛ this.private_gravity_force_factor_x = ((Math.pi/ 2) - this.options.gravityangle) * (this.options.fps * 0.001)/ 50 ؛ // model لتحضير الخريف (this.options.enableCollision) {// حساب أكبر زاوية قابلة للقطر. presets.length ؛ Math.ceil (this.canvas.width / maxdropradius) ؛ var mhi = math.ceil (this.canvas.height / maxdropradius) ؛ this.matrix = new CollisionMatrix (mwi ، mhi ، maxdropradius) ؛ 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 ؛ 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) ؛ 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] math.random () * this.canvas.height ، presets [i] [0] ، presets [i] [1])) ؛}} آخر إذا (math.random () <presets [i] [2]) {preset = presets [i] ؛ math.random () * this.canvas.height ، الإعداد المسبق [0] ، الإعداد المسبق [1])) ؛} context.save () ؛ context.globalalpha = this.opacity ؛ context.drawimage (this.glass ، 0 ، 0 ، this.canvas.width ، this.canvas.هنا أريد أن أذكر السؤال حول موارد المجال المتقاطع ، image.crossorigin = "jt" ؛ تحميل الصور عبر المجال. في البداية ، استخدمت الصور المتقاطعة ، ولكن كانت هناك مشكلة ، ثم استخدمت الصورة المحلية للتحميل ، أي src = "4.jpg" ، ولم تكن هناك مشكلة. في الواقع ، إذا كنت ترغب في استخدام الصور المتقاطعة ، فما عليك سوى إضافة Image.Crossorigin = "JT" ؛؛ الرمز.
(PreSponse هو أن الخادم قام بتمكين الأذونات)
يتضمن ذلك مشكلة CORS ، دعنا نلقي نظرة على: الاسم الكامل لـ CORS هو "مشاركة موارد الأصل". يسمح للمستعرض بالتوصل إلى الخادم المتقاطع
إن إصدار طلب XMLHTTPrequest يتغلب على القيد الذي لا يمكن استخدام Ajax إلا في نفس الأصل.
نستخدم أيضًا العمود أعلاه لعرض المشكلة:
<! doctype html> <html> <head> <style> </sytor> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> </title> <script type = "text/javascript"> Image = document.getElementById ("img") ؛ image.onload = function () {// تعيين كائن المطر var engine = new Rainyday ({Image: this ، 8000Engine.Rain ([[3،3،0.88] ، [5،5،0.9] ، [6،2،1]] ، 100) ؛ // اضبط وقت تكرار Raindrop} // image.crossorigin = "jt" ؛ // cross-domain image.src = "http://img0.imgtn.bdimg.com/it/u=938096994،3074232342&fm=21&gp=0.jpg" ؛ } </script> </head> <body onload = "runimage () ؛" > <viv> <img src = "http://img0.imgtn.bdimg.com/it/u=938096994،3074232342&fm=21&gp=0.jpg" id = "img" src = "rainy.js"> </script> </body> </html>دعونا نلقي نظرة على المعلومات الموجودة في وحدة تحكم التصحيح:
قبول الصورة/png ، صورة/*؛ q = 0.8 ،*/*؛ يأتي الطلب من (Protocol + Domain Name + Port). يقرر الخادم ما إذا كان سيوافق على الطلب بناءً على هذه القيمة. ليس ضمن نطاق الإذن. سيقوم الخادم بإرجاع استجابة HTTP العادية. وجد المتصفح أن معلومات الرأس عن هذه الاستجابة لم تحتوي على حقل Access-Control-Arigin (انظر أدناه للحصول على التفاصيل) ، لذلك كان من المعروف أن هناك خطأ ، وبالتالي تم طرح خطأ ، تم التقاطه بواسطة وظيفة اتصال Onerror لـ XMLHTTPrequest. لاحظ أنه لا يمكن تحديد هذا الخطأ بواسطة رمز الحالة ، لأن رمز الحالة لاستجابة HTTP قد يكون 200. Get/Cors Http/1.1origin: http: //api.bob.comhost: api.alice.comaccept-language: en-uconnection: keep-aliveser-agent: mozilla/5.0. عامل المستخدم Mozilla/5.0 (Windows NT 6.1 ؛ RV: 46.0) Gecko/20100101 Firefox/46.0
إذا كان اسم المجال المحدد بواسطة Origin ضمن نطاق الإذن ، فستكون للاستجابة التي يتم إرجاعها بواسطة الخادم العديد من حقول الرأس الإضافية.
يعد المحتوى أعلاه مكونًا إضافيًا من قِبل المحرر لتحقيق تأثير سقوط قطرة القطرات التلقائي. أتمنى أن تعجبك!