แชร์ปลั๊กอินที่ตกหยดน้ำโดยอัตโนมัติดาวน์โหลดที่อยู่: https://github.com/foreverjiangting/rainyday.js
มาดูกันว่าจะใช้อย่างไร เพิ่มรหัสต่อไปนี้เพื่อเรียกใช้
เอฟเฟกต์มีดังนี้:
รหัสมีดังนี้:
<! doctype html> <html> <head> <style> </style> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> image = document.getElementById ("img"); image.src = "4.jpg"; image.onload = function () {// ตั้งค่าวัตถุฝน var engine = ใหม่ฝนตก ({image: this,}); // การโทรหาเครื่องยนต์ฟังก์ชั่นฝนตก ([[4,6,8000]]); // ตั้งค่าปริมาณน้ำฝน 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 type = "text/javascript" src = "rainy.js"> </script> </body> </html>มาศึกษารหัส Rainy.js บางอย่างด้านล่าง ดูซอร์สโค้ดใน GitHub ด้านบน:
rainyday.prototype.rain = function (presets, speed) {// เตรียมผ้าใบสำหรับการทำแผนที่แบบหล่นถ้า (this.reflection! == this.reflection_none) {this.prepareflections ();} this.animatedRops (); 0.001)/ 25; this.private_gravity_force_factor_x = ((math.pi/ 2) - this.options.gravityangle) * (this.options.fps * 0.001)/ 50; = 0; i <presets.length; 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.adddropcallback = function () {var timestamp = new date () this.canvas.getContext ('2d'); context.clearRect (0, 0, this.canvas.width, this.canvas.height); บริบทการดราม่า i ++) {if (presets [i] [2]> 1 || presets [i] [3] === -1) {ถ้า (presets [i] [3]! == 0) {presets [i] [3]-; สำหรับ (var y = 0; math.random () * this.canvas.height, presets [i] [0], presets [i] [1]));}} อื่นถ้า (math.random () <presets [i] [2]) {preset = presets [i]; break; math.random () * this.canvas.height, preset [0], preset [1]));} context.save (); context.globalalpha = this.Opacity; บริบท. ddrawimage (this.glass, 0, 0, this.canvas.widthที่นี่ฉันต้องการพูดถึงคำถามเกี่ยวกับทรัพยากรข้ามโดเมน, image.crossorigin = "jt"; กำลังโหลดภาพข้ามโดเมน ในตอนแรกฉันใช้รูปภาพข้ามโดเมน แต่มีปัญหาและจากนั้นฉันใช้รูปภาพท้องถิ่นเพื่อโหลดเช่น src = "4.jpg" และไม่มีปัญหา ในความเป็นจริงหากคุณต้องการใช้ภาพข้ามโดเมนเพียงเพิ่ม image.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> image = document.getElementById ("img"); image.onload = function () {// ตั้งค่าวัตถุฝน var engine = ใหม่ Rainyday ({image: this,}); engine.rain ([[4,6,8000]]); 8000ENGINE.RAIN ([[3,3,0.88], [5,5,0.9], [6,2,1]], 100); // ตั้งเวลาการทำซ้ำของฝน readrop} // 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 ();" > <div> <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, image/*; q = 0.8,*/*; q = 0.5accept-encoding gzip, deflateaccept-language zh-cn, zh; q = 0.8, en-us; q = 0.5, en; คำขอมาจาก (โปรโตคอล + ชื่อโดเมน + พอร์ต) เซิร์ฟเวอร์ตัดสินใจว่าจะยอมรับคำขอตามค่านี้หรือไม่ มันไม่ได้อยู่ในขอบเขตของการอนุญาต เซิร์ฟเวอร์จะส่งคืนการตอบกลับ HTTP ปกติ เบราว์เซอร์พบว่าข้อมูลส่วนหัวของการตอบกลับนี้ไม่ได้มีฟิลด์การควบคุมการเข้าถึง-Ollow-Origin (ดูรายละเอียดด้านล่าง) ดังนั้นจึงเป็นที่ทราบกันดีว่าเกิดข้อผิดพลาดและทำให้เกิดข้อผิดพลาด โปรดทราบว่าข้อผิดพลาดนี้ไม่สามารถระบุได้ด้วยรหัสสถานะเนื่องจากรหัสสถานะของการตอบกลับ http อาจเป็น 200. get/cors http/1.1origin: http: //api.bob.comhost: api.alice.comaccept-language: en-usconnection: ผู้ใช้ Mozilla/5.0 (Windows NT 6.1; RV: 46.0) Gecko/20100101 Firefox/46.0
หากชื่อโดเมนที่ระบุโดย Origin อยู่ในขอบเขตการอนุญาตการตอบกลับที่ส่งคืนโดยเซิร์ฟเวอร์จะมีฟิลด์ส่วนหัวเพิ่มเติมหลายฟิลด์
เนื้อหาข้างต้นเป็นปลั๊กอินที่แชร์โดยตัวแก้ไขเพื่อให้ได้เอฟเฟกต์การตกหยดหยดอัตโนมัติ ฉันหวังว่าคุณจะชอบมัน!