ตัวอย่างการใช้ผ้าใบเพื่อให้ได้เอฟเฟ็กต์ฝนที่สวยงาม

บทความนี้จะพูดถึงวิธีการใช้แคนวาสเพื่อวาดเอฟเฟ็กต์ฝนที่สวยงาม มาดูผลลัพธ์สุดท้ายกันดีกว่า

การเรนเดอร์

ดูภาพเพื่อวิเคราะห์ว่าเราจำเป็นต้องบรรลุผลอะไรบ้าง

1. เอฟเฟกต์ฝนตก เลื่อนเมาส์เพื่อควบคุมทิศทางที่ตกลงมา

2. เม็ดฝนตกลงมาและกระจายเป็นหยดน้ำขนาดเล็ก ทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กจะเหมือนกับทิศทางการเคลื่อนที่ของเมาส์

3. เม็ดฝนตกลงมาในช่วงพิกัดของเมาส์และกระจายเป็นหยดน้ำขนาดเล็ก ในทำนองเดียวกัน ทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กก็เหมือนกับทิศทางการเคลื่อนที่ของเมาส์

เอาล่ะ เรามาแบ่งเอฟเฟกต์ทั้งหมดออกเป็นสามเอฟเฟกต์คร่าวๆ และบรรลุเอฟเฟกต์ทั้งสามนี้ เท่านี้ก็เสร็จเรียบร้อย

มาทำทีละขั้นตอนกัน

แนวคิดที่จะบรรลุผลทั้งหมดคือ

ใช้อาร์เรย์เพื่อบันทึกวัตถุน้ำฝน

วัตถุหยดน้ำฝนมีคุณสมบัติต่างๆ ที่ใช้เพื่อแสดงพิกัด x ของหยดน้ำฝน พิกัด y ความยาว ความเร็วในการตก สี และธงเพื่อพิจารณาว่าจะลบวัตถุนั้นหรือไม่

เพิ่มวัตถุน้ำฝนจำนวนหนึ่งลงในอาร์เรย์ จากนั้นสำรวจอาร์เรย์ แก้ไขพิกัด x และพิกัด y ของวัตถุน้ำฝนแต่ละรายการ และใช้ Canvas เพื่อวาดจุดสองจุดตามพิกัดของวัตถุน้ำฝน หยดน้ำฝนได้ก่อตัวขึ้น

ดังนั้นจุดเน้นของการบรรลุผลจึงอยู่ที่พิกัด

พิกัด x ของหยดน้ำฝน: ตัวเลขสุ่ม

พิกัดหยดน้ำฝน y: -100 เพื่อให้เม็ดฝนเข้ามาจากนอกพื้นที่ที่มองเห็นได้

พิกัดหยดน้ำฝน x:原x坐标的值+ speed * speedx

ความเร็วเป็นค่าคงที่ซึ่งแสดงถึงความเร็วที่ตกลงมาของเม็ดฝน

speedx เป็นตัวแปรที่เกี่ยวข้องกับทิศทางการเคลื่อนที่ของเมาส์ speedx = speedx + (maxspeedx - speedx) / 50

และ maxspeedx คือค่าที่ได้รับตามทิศทางการเคลื่อนที่ของเมาส์

maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2) ,

e.clientX: ค่าระยะห่างของเมาส์ทางด้านซ้ายของพื้นที่ที่มองเห็นได้

canvasEl.clientWidth: ความกว้างของพื้นที่ภาพทั้งหมด

กล่าวอีกนัยหนึ่ง speedx คือค่าที่ค่อยๆ เข้าใกล้ maxspeedx

ช่วงค่าของ maxspeedx คือ -1 ถึง 1 ยิ่งค่าเข้าใกล้ -1 มากเท่าใด ทิศทางก็จะยิ่งไปทางซ้ายมากขึ้นเท่านั้น

ทำไมไม่ใช้ maxspeedx ล่ะ?

ทั้งนี้เพื่อป้องกันไม่ให้เม็ดฝนเปลี่ยนทิศทางอย่างรวดเร็ว แทนที่จะเปลี่ยนทิศทางทันทีหลังจากเปลี่ยนเมาส์ ควรมีความล่าช้าเล็กน้อยเพื่อทำให้ดูดีขึ้น

ถ้าใช้ maxspeedx เอฟเฟกต์จะเป็นแบบนี้

ถ้าใช้ speedx เอฟเฟกต์จะเป็นแบบนี้

พิกัดหยดน้ำฝน y:原y坐标的值+ speed

ความเร็วจะเหมือนกับที่กล่าวไว้ในพิกัด x ข้างต้น เป็นค่าคงที่ที่แสดงถึงความเร็วที่ตกลงมาของเม็ดฝน

โอเค ในที่สุด ฉันก็ใช้แคนวาสวาดจุดสองจุดตามพิกัดของวัตถุหยดน้ำฝน จากนั้นจึงเชื่อมต่อจุดเหล่านั้น และหยดน้ำฝนก็ถูกวาดขึ้นมา

พิกัดจุดแรกนั้นค่อนข้างง่าย รับพิกัด x และพิกัด y ของวัตถุน้ำฝนซึ่งเป็นพิกัดของจุดนี้โดยตรง

พิกัดจุดที่สอง:

x坐标= 雨滴x坐标的值+ 雨滴长度* speedx

y坐标= 雨滴y坐标的值+ 雨滴长度

สุดท้ายเชื่อมสองจุดนี้เข้าด้วยกันก็จะมีเส้นเป็นหยดน้ำฝน

เมื่อตั้งค่าพิกัด x จะใช้ตัวแปร speedx อีกครั้ง เพื่อให้ทิศทางน้ำฝนและทิศทางตกของน้ำฝนเหมือนเดิม

เมื่อไม่ใช้ speedx จะเป็นเช่นนี้

เมื่อใช้ speedx จะเป็นเช่นนี้

แนวคิดนี้จริงๆ แล้วค่อนข้างคล้ายกับผลกระทบข้างต้น

ใช้อาร์เรย์เพื่อบันทึกวัตถุหยดน้ำขนาดเล็ก

หยดน้ำเล็กๆ จริงๆ แล้วเป็นส่วนโค้งเป็นวงกลม

วัตถุหยดน้ำขนาดเล็กมีคุณสมบัติต่างๆ ที่ใช้เพื่อแสดงพิกัดของหยดน้ำขนาดเล็ก ความเร็วในการเคลื่อนที่ของแกน x ความเร็วในการเคลื่อนที่ของแกน y รัศมีของวงกลม และธงเพื่อพิจารณาว่าจะลบวัตถุนั้นหรือไม่

เพิ่มวัตถุหยดน้ำขนาดเล็กจำนวนหนึ่งลงในอาร์เรย์ จากนั้นสำรวจอาร์เรย์ แก้ไขพิกัด x และพิกัด y ของวัตถุหยดน้ำขนาดเล็กแต่ละชิ้น และใช้ Canvas เพื่อวาดส่วนโค้งตามคุณลักษณะพิกัดและคุณลักษณะรัศมีของวัตถุหยดน้ำขนาดเล็ก วัตถุหยดน้ำ

ดังนั้นจุดเน้นของการบรรลุผลจึงยังอยู่ที่พิกัด

หยดน้ำขนาดเล็กจะปรากฏขึ้นเมื่อหยดน้ำหายไป ดังนั้นพิกัดของหยดน้ำขนาดเล็กจึงขึ้นอยู่กับพิกัดของหยดน้ำด้วย หากคุณลบหยดน้ำฝน หยดน้ำขนาดเล็กบางส่วนจะปรากฏขึ้น และทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กจะเป็นดังนี้ ทิศทางของน้ำฝนที่ตกลงมาด้วย เมาส์ ทิศทางการเคลื่อนที่จะเหมือนกัน ดังนั้น ตัวแปรความเร็วx

小水珠x坐标： 删除的雨滴x坐标+ 删除的雨滴长度* speedx

小水珠y坐标：删除的雨滴y坐标+ 删除的雨滴长度

ที่นี่เราจำเป็นต้องใช้คุณลักษณะสองประการของวัตถุหยดน้ำขนาดเล็ก vx (ความเร็วของการเปลี่ยนแปลงของค่าของแกน x) และ vy (ความเร็วของการเปลี่ยนแปลงของค่าของแกน y)

พิกัด x ของหยดน้ำขนาดเล็ก

vx = vx + speedx / 2

小水珠的x坐标=原x坐标+ vx ,

speedx: ตัวแปรที่เกี่ยวข้องกับทิศทางการเคลื่อนที่ของเมาส์ที่กล่าวมาข้างต้น หน้าที่นี้คือการควบคุมทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กในทิศทางเดียวกับทิศทางอื่นๆ

speedx / 2 จุดประสงค์ในการหารด้วย 2 คือการทำให้ระยะการเคลื่อนที่ของหยดน้ำเล็กๆ บนแกน x สั้นลงและดูสมจริงยิ่งขึ้น

พิกัด y ของหยดน้ำขนาดเล็ก

vy = vy + gravity

小水珠的y坐标= 原y坐标+ vy;

vy: จำนวนลบ

แรงโน้มถ่วง: แรงโน้มถ่วง ซึ่งเป็นจำนวนบวก ตั้งค่าเป็น 0.5 ในโค้ดที่สมบูรณ์

เนื่องจากพิกัด y ดั้งเดิมเป็นจำนวนบวก ค่าของพิกัด y ของหยดน้ำขนาดเล็กจึงจะลดลงก่อนแล้วจึงเพิ่มขึ้น เพื่อให้ได้ผลที่หยดน้ำขนาดเล็กจะขึ้นก่อนแล้วจึงตกลงตามภาพ

สุดท้าย เพียงใช้ Canvas เพื่อวาดส่วนโค้งตามคุณลักษณะพิกัดและคุณลักษณะรัศมีของหยดน้ำขนาดเล็ก ส่วนโค้งจะเป็นแบบสุ่ม

3. เม็ดฝนตกลงมาในช่วงพิกัดของเมาส์และกระจายเป็นหยดน้ำขนาดเล็ก ในทำนองเดียวกัน ทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กก็เหมือนกับทิศทางการเคลื่อนที่ของเมาส์

ง่ายต่อการกำหนดขนาดของวงกลมในภาพ สมมติว่ารัศมีของวงกลมคือ 35 เราสามารถรับพิกัดของเมาส์เป็นจุดศูนย์กลางของวงกลมและ 35 เป็นรัศมี เราสามารถกำหนดขนาดของวงกลมได้

ประเด็นสำคัญคือจะตัดสินได้อย่างไรว่าเม็ดฝนเข้าสู่ช่วงนี้หรือไม่ ซึ่งต้องใช้ทฤษฎีบทพีทาโกรัส ดูจากภาพ

เนื่องจากหยาดฝนเป็นเส้นที่เชื่อมระหว่างจุดสองจุดเพื่อดูว่าหยาดฝนเข้าสู่ช่วงนี้หรือไม่คุณต้องดูพิกัดของจุดใต้หยาดฝนว่าระยะเส้นตรงจากเมาส์คือความยาวของส่วนของเส้นตรง เอบีในภาพ.

ทฤษฎีบทพีทาโกรัส: ผลรวมของกำลังสองของด้านที่เป็นมุมฉากทั้งสองของรูปสามเหลี่ยมมุมฉากเท่ากับกำลังสองของด้านตรงข้ามมุมฉาก

AB = Math.sqrt(BC BC + AC AC)

BC = พิกัด x ของหยดน้ำฝน - พิกัด x ของเมาส์

AC = พิกัดหยดน้ำฝน y - พิกัดเมาส์ y

วิธี Math.sqrt() ใช้ในการคำนวณรากที่สองของตัวเลข

หลังจากที่เราทราบระยะห่างเป็นเส้นตรงจากน้ำฝนถึงเมาส์แล้ว ให้เปรียบเทียบกับรัศมีของวงกลม ถ้ามากกว่ารัศมี จะไม่อยู่ในระยะ ไม่เช่นนั้นจะเป็น

หากอยู่ในระยะ ให้ลบเม็ดฝนออกแล้ววาดหยดน้ำเล็กๆ ลงไป

สรุป

เพื่อให้บรรลุผลนี้ ปัญหาอยู่ที่ทิศทาง ทิศทางของเม็ดฝน ทิศทางของเม็ดฝนที่ตกลงมา และทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็ก ทั้งหมดนี้เกี่ยวข้องกับทิศทางการเคลื่อนที่ของเมาส์ หลังจากกำหนดทิศทางต่างๆ แล้ว ใช้ผืนผ้าใบเพื่อวาดเส้นอย่างต่อเนื่องตามระยะทาง

รหัสที่สมบูรณ์

 <!doctype html><html lang=en><head> <meta charset=UTF-8> <style> * { ระยะขอบ: 0; การขยาย: 0; } </style></head><body> <canvas id =canvas style=position: Absolute; height: 100%; width:100%;></canvas> <script> window.onload = main; function main() { // รับองค์ประกอบแคนวาส var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); // สีพื้นหลังของผืนผ้าใบ var backgroundColor = '#000'; // ความกว้างของผืนผ้าใบเท่ากับ ความกว้างของพื้นที่ภาพ canvasEl.width = canvasEl.clientWidth; // ความสูงของผืนผ้าใบเท่ากับความสูงของพื้นที่ที่มองเห็น canvasEl.height = canvasEl.clientHeight; // อาร์เรย์เพื่อบันทึกหยดน้ำขนาดเล็ก หลังจากที่เม็ดฝนตกลงมา พวกมันจะกระจายเป็นหยดน้ำเล็กๆ ขึ้นมาเป็นหยดน้ำเล็กๆ ก่อน แล้วตกลงมา ส่วนใหญ่เป็นเพราะแรงโน้มถ่วง เนื่องจากตัวแปร var แรงโน้มถ่วง = 0.5; // บันทึกอาร์เรย์ของเม็ดฝน // แต่ละเม็ดฝนเป็นเส้นที่วาด var linelist = []; // บันทึกพิกัดของเมาส์ // mousePos[0 ] แสดงถึงค่าของแกน x, mousePos[1] แสดงถึงค่าของแกน y var mousePos = [0, 0]; // ตามเมาส์ เม็ดฝนในพื้นที่ขนาด mouseDis จะหายไป ทำให้เกิดเอฟเฟกต์การกระเจิง // เมื่อ mousePos เป็นศูนย์กลางของวงกลม mouseDis คือ Radius เม็ดฝนในช่วงนี้จะกระจายออกไปและก่อตัวเป็นหยดน้ำขนาดเล็กจำนวนมาก var mouseDis = 35; // อัปเดตภาพเคลื่อนไหวหนึ่งครั้งและวาด lineNum เม็ดฝนยิ่งค่า lineNum มากขึ้น ฝนก็จะยิ่งหนาแน่นมากขึ้นเท่านั้น lineNum = 3; // ทำตามทิศทางของเมาส์เพื่อเปลี่ยนความเร็วของทิศทางฝน // หลังจากที่เมาส์เคลื่อนที่ ทิศทางของฝนจะค่อยๆ เปลี่ยนไป ขึ้นอยู่กับตัวแปร speedx var speedx = 0; คือค่าสูงสุดที่ speedx สามารถรับได้ // เมื่อ speedx = maxspeedx ทิศทางของฝนจะเปลี่ยนทันทีตามทิศทางการเคลื่อนที่ของเมาส์ var maxspeedx = 0; // เมื่อขนาดหน้าเปลี่ยนไป ให้รีเซ็ตขนาดแคนวาส window.onresize = function () { canvasEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; } // เลื่อนเมาส์เพื่อทริกเกอร์เหตุการณ์ window.onmousemove = function (e) { // ตั้งค่า mousePos เท่ากับพิกัดของเมาส์ // e.clientX คือระยะห่างจาก ด้านซ้ายของพื้นที่ที่มองเห็นได้ของหน้าต่างเบราว์เซอร์ ระยะทาง // e.clientY คือระยะห่างจากด้านบนของพื้นที่ที่มองเห็นได้ของหน้าต่างเบราว์เซอร์ mousePos[0] = e.clientX; mousePos[1] = e.clientY; // ตั้งค่า maxspeedx ผ่านตำแหน่งเมาส์ ช่วงค่าคือ -1 ถึง 1 // ค่าของ maxspeedx สัมพันธ์กับ // 1. ทิศทางของเม็ดฝน // 2. ทิศทางของ เม็ดฝน // 3. ความเร็วที่ทิศทางการตกของเม็ดฝนเปลี่ยนแปลงไปตามทิศทางการเคลื่อนที่ของเมาส์ // 4. ทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็ก // ยิ่งค่าเข้าใกล้ 1 ทิศทางก็จะยิ่งไปทางขวามากขึ้น / / ยิ่งค่ายิ่งใกล้ -1 ทิศทางก็จะยิ่งไปทางซ้ายมากขึ้น maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); } // ตามพารามิเตอร์ ให้ส่งคืนสี rgb ใช้เพื่อตั้งค่าสีของฟังก์ชันเม็ดฝน getRgb(r, g, b) { return rgb( + r + , + g + , + b + } // วาดฟังก์ชัน Raindrop (เส้น) createLine(e) { // สุ่มสร้างความยาวของ Raindrop var temp = 0.25 * (50 + Math.random() * 100); // วัตถุเส้นที่แสดงถึงสายฝน var = { // ความเร็วของฝนตก: 5.5 * (Math.random() * 6 + 3), / / พิจารณาว่าจะลบหรือไม่ ลบหากค่าเป็นจริง die: false, // Raindrop x พิกัด posx: e, // Raindrop y พิกัด posy: -50, // Raindrop length h: temp, // สีของสีน้ำฝน: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75)) }; วัตถุบรรทัด (น้ำฝน) เพิ่มไปยังอาร์เรย์ที่ถือเม็ดฝน linelist.push(line); } // วาดหยดน้ำเล็กๆ (หยดน้ำเล็กๆ หลังจากเม็ดฝนกระจายเป็นส่วนโค้ง) ฟังก์ชัน createDrop(x, y) { // วัตถุหยดซึ่งเป็นตัวแทนของส่วนโค้ง var drop = { // พิจารณาว่าจะลบหรือไม่ ค่า หากเป็นจริง ลบ die: false, // พิกัด x ของจุดศูนย์กลางส่วนโค้ง posx: x, // พิกัด y ของจุดศูนย์กลางส่วนโค้ง: y, // vx แสดงถึงความเร็วที่ค่าแกน x เปลี่ยนแปลง vx: (Math.random ( ) - 0.5) * 8, // vy แสดงถึงช่วงความเร็วของการเปลี่ยนแปลงของค่าแกน y: -3 ถึง -9 vy: Math.random() * (-6) - 3, // รัศมีของรัศมีส่วนโค้ง : Math.random() * 1.5 + 1 }; return drop; } // วาดฟังก์ชันหยดน้ำขนาดเล็กจำนวนหนึ่ง madedrops(x, y) { // สุ่มสร้างตัวเลข maxi // maxi แสดงถึงจำนวนหยดน้ำขนาดเล็กที่จะวาด var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y) ); // เริ่มเรียกใช้ฟังก์ชันอัปเดตเพื่ออัปเดตหน้าต่างภาพเคลื่อนไหว (dropList.length > 0) { // สำรวจอาร์เรย์ที่เก็บหยดน้ำขนาดเล็ก dropList.forEach(function (e) { //Set e.vx, vx แสดงถึงความเร็วของการเปลี่ยนแปลงพิกัด x // (speedx)/2 คือ เพื่อทำให้ระยะการเคลื่อนที่ของหยดน้ำขนาดเล็กบนแกน x สั้นลงและดูสมจริงมากขึ้น // พร้อมทั้งทำให้ทิศทางการเคลื่อนที่ของหยดน้ำขนาดเล็กเหมือนกับทิศทางของเม็ดฝน, ทิศทางการตกของเม็ดฝน และ ทิศทางการเคลื่อนที่ของเมาส์ e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; //Set e.vy, vy แสดงถึงความเร็วของการเปลี่ยนแปลงพิกัด y // ช่วงของ e.vy คือ -3 ถึง -9 และในขณะนี้ e.posy ( พิกัด y) ต้องเป็นค่าบวก ดังนั้นค่าของ e.posy จะลดลงก่อนแล้วจึงเพิ่มขึ้น // กล่าวคือ เม็ดฝนจะกระจายตัวเป็นหยดน้ำเล็กๆ และหยดน้ำเล็กๆ จะเพิ่มขึ้นก่อนแล้วจึง ฤดูใบไม้ร่วง e.vy = e.vy + แรงโน้มถ่วง; + e.vy; // หากพิกัด y ของหยดน้ำขนาดเล็กมากกว่าความสูงของพื้นที่ที่มองเห็นได้ ให้ตั้งค่าแอตทริบิวต์ die เป็นจริง // หากหยดน้ำขนาดเล็กเกินพื้นที่ที่มองเห็นได้ ให้ลบออกหาก (e. posy > canvasEl.clientHeight) { e .die = true; } }); } // ลบสมาชิกอาร์เรย์ที่มีแอตทริบิวต์ die เป็นจริง // ลบหยดน้ำขนาดเล็กออกนอกพื้นที่ที่มองเห็นได้ (var i = dropList.length - 1 ; i >= 0; i- -) { ถ้า (dropList[i].die) { dropList.splice(i, 1); } } // ตั้งค่าความเร็วของการเปลี่ยนทิศทางของฝน ช่วงค่า: -1 ถึง 1 // เมื่อ speedx = maxspeedx ทิศทางของฝนจะเปลี่ยน ทิศทางการเคลื่อนที่ของเมาส์ทันที speedx = speedx + (maxspeedx - speedx) / 50; // วาดเม็ดฝนจำนวนหนึ่งตามค่าของ lineNum สำหรับ (var i = 0; i < lineNum; i++) { // เรียกใช้ฟังก์ชัน createLine พารามิเตอร์คือพิกัด x ของ Raindrop createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width) } // ตั้งค่าบรรทัดสุดท้ายนั่นคือ เม็ดฝนกระจายออกเป็นหยดน้ำเล็กๆ จำนวนมาก ตำแหน่ง var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5; // สำรวจอาร์เรย์ที่ถือเม็ดฝน linelist.forEach(function (e) { // ใช้ทฤษฎีบทพีทาโกรัสเพื่อกำหนดช่วงที่เม็ดฝนจะกระจายออกเป็นหยดน้ำขนาดเล็ก // e.posx + speedx * eh คือพิกัด x ของ Raindrop/ / e.posy + eh คือพิกัด y ของ Raindrop var dis = Math.sqrt(((e.posx + speedx * eh) - mousePos[0]) * ((e.posx + speedx * เอ๊ะ) - mousePos[0]) + (e.posy + เอ๊ะ - mousePos[1]) * (e.posy + เอ๊ะ - mousePos[1])); // หากอยู่ในพื้นที่ mouseDis ให้ลบน้ำฝน และวาดมัน หยดน้ำขนาดเล็ก (ส่วนโค้ง) // ตระหนักถึงเอฟเฟกต์ของเมาส์ที่สัมผัสกับเม็ดฝนและเม็ดฝนที่กระจัดกระจายเป็นหยดน้ำขนาดเล็ก ถ้า (dis < mouseDis) { // ลบเม็ดฝน e.die = true; หยดน้ำเล็กๆ (วงกลม) ส่วนโค้ง) madedrops(e.posx + speedx * eh, e.posy + eh); } // หากเม็ดฝนเกินเส้นสุดท้าย ให้ลบเม็ดฝนออกแล้ววาดหยดน้ำเล็กๆ (ส่วนโค้ง) ถ้า ((e.posy + eh) > endLine) { e.die = true; madedrops(e.posx + speedx * eh, e.posy + eh); } // ถ้าพิกัด y ของเม็ดฝนมากกว่าความสูงของพื้นที่ที่มองเห็นได้ ให้ตั้งค่า die คุณสมบัติเป็นจริง // หากฝนตกเกินพื้นที่ที่มองเห็น ให้ลบออกถ้า (e.posy >= canvasEl.clientHeight) { e.die = true; } else { // ค่อยๆ เพิ่มค่าของพิกัด y ของ Raindrop e.posy = e posy + e.speed ; // เปลี่ยนพิกัด x ของเม็ดฝน // * speedx ใช้ในการควบคุมทิศทางการตกของเม็ดฝน // ทำให้ทิศทางการตกของเม็ดฝนเหมือนกับทิศทางการเคลื่อนที่ของเมาส์ e.posx = e .posx + e.speed * speedx; ลบสมาชิกอาร์เรย์ที่มีคุณลักษณะ die เป็นจริง // ลบเม็ดฝนในบริเวณเมาส์ เลยบรรทัดสุดท้าย และนอกพื้นที่ที่มองเห็นได้สำหรับ (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); } } // เรนเดอร์เรนเดอร์ (); // เรียกการอัปเดตซ้ำเพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหว // ฟังก์ชันการเรนเดอร์ render() { // วาดรูปสี่เหลี่ยมผืนผ้าขนาดใหญ่เท่ากับพื้นที่ที่มองเห็นได้ ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); // วาดเอฟเฟกต์หยดน้ำฝน ctx lineWidth = 5; linelist.forEach (ฟังก์ชัน (บรรทัด) { ctx. strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); // * speedx ใช้เพื่อควบคุมทิศทางของเม็ดฝน // ทำให้ทิศทางของเม็ดฝนเหมือนกับทิศทางการเคลื่อนที่ของเมาส์ ctx.lineTo(line.posx + line. h * speedx, line.posy + line.h); ctx. stroke(); }); // วาดเม็ดฝนที่กระจายออกเป็นหยดน้ำขนาดเล็ก dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.สโตรค(); }); // ไม่แสดงข้อคิดเห็น และคุณสามารถดูช่วงของเมาส์/* ctx.beginPath(); ctx.arc(mousePos[0], mousePos[1], mouseDis, 0, 2 * Math.PI); */ } } </script></body></html>

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network