เอฟเฟกต์การเชื่อมต่อพื้นหลังแบบไดนามิกยอดนิยม โค้ดด้านล่างนี้ได้รับการจัดระเบียบและแสดงความคิดเห็นโดยผู้เขียนเกี่ยวกับโค้ดที่แยกออกมา ซึ่งเหมาะมากสำหรับการเรียนรู้อ้างอิง
ภาพหน้าจอเอฟเฟกต์:
การสาธิตเอฟเฟกต์: https://jc1144096387.github.io/canvas_nest/
ที่อยู่ผู้เขียน: https://blog.csdn.net/u013556477/article/details/82819785
รหัส HTML (รหัสทดสอบ):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Author content=> <meta name=Keywords content=> <meta name=Description content=> <title>เอฟเฟกต์การเชื่อมต่อฉากแคนวาส</title> <style type=text/css>*{ ระยะขอบ: 0px; } body{ สีพื้นหลัง: #f4f4f4; </style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position: fixed; top: 0px; ; ดัชนี z: -1; ความทึบ: 0.5;></canvas> --> <script type=text/javascript src=test-clear.js ความทึบ=0 .6></script></body></html>รหัสจาวาสคริปต์:
//ดำเนินการฟังก์ชันทันที //! ใช้เพื่อบอกเอ็นจิ้น JavaScript ว่านี่คือนิพจน์ฟังก์ชัน ไม่ใช่การประกาศฟังก์ชัน ()! , +, - และตัวดำเนินการอื่นๆ สามารถบรรลุผลนี้ได้ แต่ () ปลอดภัยที่สุด // การเพิ่ม () หลัง !function(){} จะเรียกใช้ฟังก์ชันทันที // สิ่งนี้สามารถจำลองขอบเขตส่วนตัวได้ ด้วยวิธีนี้ html ไฟล์จะไม่ทำให้เกิดความขัดแย้งของตัวแปรเมื่ออ้างอิงไฟล์ js หลายไฟล์! function() { //องค์ประกอบผ้าใบที่เกี่ยวข้อง // สร้างองค์ประกอบผ้าใบและตั้งค่ารหัสขององค์ประกอบผ้าใบ var canvas = document.createElement(canvas), context = canvas .getContext (2d), attr = getAttr(); //ตั้งค่าแอตทริบิวต์ที่เกี่ยวข้องของ canvas ที่สร้างขึ้น canvas.id = c_n + attr.length; canvas.style.cssText = position:fixed;top:0;left:0;z-index: + attr.z + ;opacity: + attr.opacity; //เพิ่มองค์ประกอบ canvas ให้กับองค์ประกอบ body document.getElementsByTagName(body)[0].appendChild(canvas); //ฟังก์ชันนี้ตั้งค่าแอตทริบิวต์ความกว้างและแอตทริบิวต์ความสูงขององค์ประกอบผ้าใบ getWindowWH(); //เหตุการณ์ onresize จะเกิดขึ้นเมื่อหน้าต่างหรือเฟรมถูกปรับขนาด //นี่คือเมื่อขนาดหน้าต่างเปลี่ยนแปลง ความกว้างและความสูงของหน้าต่าง ได้รับใหม่ และตั้งค่าความกว้างและความสูงขององค์ประกอบ canvas window.onresize = getWindowWH; //ฟังก์ชันนี้จะได้รับองค์ประกอบสคริปต์ที่อ้างอิงถึงไฟล์นี้ // เนื่องจากฟังก์ชัน getScript ถูกดำเนินการหนึ่งครั้งระหว่างการกำหนดในไฟล์นี้ เมื่อไฟล์ html อ้างถึงไฟล์นี้ แท็กสคริปต์หลังจากไฟล์นี้ไม่ได้รับการตีความโดยเบราว์เซอร์ //ดังนั้นในอาร์เรย์สคริปต์ที่ได้รับ องค์ประกอบสคริปต์ที่อ้างอิงบทความนี้จะอยู่ที่ส่วนท้ายของอาร์เรย์ //วัตถุประสงค์ของฟังก์ชันนี้คือเพื่อให้นักพัฒนาสามารถแก้ไขแอตทริบิวต์ขององค์ประกอบสคริปต์ที่แนะนำไฟล์ลงใน HTML ได้โดยตรง แก้ไขคุณสมบัติบางอย่างของผืนผ้าใบ , ดัชนี z ของผืนผ้าใบ, ความโปร่งใสและจำนวนสี่เหลี่ยมเล็กๆ, สี // ร่วมมือกับโค้ดก่อนหน้าเพื่อเพิ่มองค์ประกอบผืนผ้าใบให้กับองค์ประกอบเนื้อหา เมื่อนักพัฒนาต้องการใช้ เอฟเฟกต์พิเศษนี้เป็นพื้นหลัง เขาเพียงแค่ต้องเพิ่มองค์ประกอบสคริปต์ลงในไฟล์ html และเพียงอ้างอิงฟังก์ชันไฟล์นี้ getAttr() { ให้สคริปต์ = document.getElementsByTagName(script), len = scripts.length, script = scripts[len - 1]; //v เป็นองค์ประกอบสคริปต์สุดท้าย ซึ่งอ้างถึงองค์ประกอบสคริปต์ของเอกสารนี้ return { length: len, z: script. getAttribute (zIndex) ||. -1, ความทึบ: script.getAttribute(ความทึบ) ||. 0.5, สี: script.getAttribute(color) ||. script.getAttribute(count) ||. 99 } } //รับความกว้างและความสูงของหน้าต่าง และตั้งค่าฟังก์ชันความกว้างและความสูงขององค์ประกอบ canvas getWindowWH() { W = canvas.width = window.innerWidth || document.documentElement.clientWidth | |. document.body .clientWidth, H = canvas.height = window.innerHeight ||. document.documentElement.clientHeight || //สร้างสี่เหลี่ยมเล็กๆ ที่ตำแหน่งสุ่ม var Random = Math.random, squares = []; //เก็บสี่เหลี่ยมเล็กๆ//ใส่สี่เหลี่ยมเล็กๆ เข้าไปในอาร์เรย์[] สำหรับ (ให้ p = 0; p < attr.count; p++ ) { var square_x = Random() * W, //abscissa square_y = Random() * H, //ordinate square_xa = 2 * Random() - 1, //x-axis displacement-1,1 square_ya = 2 * สุ่ม () - 1; // การกระจัดของแกน Y squares.push ({ x: square_x, y: square_y, xa: square_xa, ya: square_ya, สูงสุด: 6000 }) } // สร้างเมาส์ขนาดเล็ก var mouse = { x: null, y: null, สูงสุด: 20,000 }; // รับพิกัดของเมาส์ window.onmousemove = function(i) { //i คือ W3C DOM, window.event สำหรับ IE DOM เพื่อให้เข้ากันได้กับ IE //อย่างไรก็ตาม ดูเหมือนว่าปัจจุบัน IE รองรับ W3C DOM ฉันยังสามารถบรรลุเอฟเฟกต์การโต้ตอบของเมาส์ได้ด้วยการแสดงความคิดเห็นในบรรทัดถัดไปของโค้ด ไม่รองรับ 7/8/9 ใช่ ฉันยังไม่ได้ทดสอบ // แน่นอนว่ามันถูกต้องที่จะเพิ่ม i = i ||. window.event; mouse.x = i.clientX; ; } // หลังจากที่เมาส์เคลื่อนออกจากหน้าต่าง ให้เอาเมาส์ Small square window.onmouseout ออก = function() { mouse.x = null; mouse.y = null; } //วาดรูปสี่เหลี่ยมเล็กๆ สี่เหลี่ยมเล็กๆจะเคลื่อนที่ (เคลื่อนที่กลับด้านเมื่อสัมผัสขอบ) สี่เหลี่ยมเล็กๆถูกผูกไว้ด้วยเมาส์ var Animation = window .requestAnimationFrame ||. window.msRequestAnimationFrame ||. window.oRequestAnimationFrame ||. 45) }; // requestAnimationFrame ที่แต่ละเบราว์เซอร์รองรับนั้นแตกต่างกัน และมันเข้ากันได้กับแต่ละฟังก์ชันของเบราว์เซอร์ () { // ล้าง canvas context.clearRect (0, 0, W, H); ].concat (สี่เหลี่ยม); // เชื่อมต่อ (รวม) อาร์เรย์สี่เหลี่ยมเล็ก ๆ ของเมาส์และอาร์เรย์สี่เหลี่ยมเล็ก ๆ อื่น ๆ var x, v, A, B, z, y; // ตารางแอตทริบิวต์สี่เหลี่ยม: x, y, xa, ya, สูงสุด squares.forEach(function(i) { //รับรู้ทิศทางการเคลื่อนที่ของสี่เหลี่ยมเล็กๆ ix += i.xa; iy += i.ya; //ควบคุมทิศทางการเคลื่อนที่ของสี่เหลี่ยมเล็กๆ//เมื่อสี่เหลี่ยมเล็กๆ ไปถึงหน้าต่าง ขอบเขต เคลื่อนที่ไปในทิศทางตรงกันข้าม i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); i.ya = i.ya * (iy > H || iy < 0 ? - 1 : 1); //พารามิเตอร์สองตัวแรกของ fillRect คือพิกัด x, y ของมุมซ้ายบนของสี่เหลี่ยมผืนผ้า และสองตัวสุดท้ายคือความกว้างและความสูงตามลำดับ //วาดบริบทสี่เหลี่ยมจัตุรัสเล็กๆ fillRect(ix - 0.5, iy - 0.5 , 1, 1); // สำรวจองค์ประกอบทั้งหมดใน w for (ให้ n = 0; n < w.length; n ++) { x = w [n]; // ถ้า x และฉันไม่ใช่วัตถุเดียวกันและ พิกัด xy ของ x มีอยู่ถ้า (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; // ความแตกต่างระหว่างพิกัด x ของ i และ x y_diff = iy - xy; // ความแตกต่างระหว่างพิกัด y ของ i และ x Distance = x_diff * x_diff + y_diff * y_diff; // ด้านตรงข้ามมุมฉากกำลังสองถ้า (ระยะทาง < x.max) { //ทำให้สี่เหลี่ยมเล็ก i ถูกผูกไว้ด้วยสี่เหลี่ยมเล็กของเมาส์ นั่นคือถ้าระยะห่างระหว่างสี่เหลี่ยมเล็ก i กับสี่เหลี่ยมเล็กของเมาส์นั้นใหญ่เกินไป สี่เหลี่ยมเล็ก i ก็จะถูกผูกไว้ด้วยสี่เหลี่ยมเล็ก ของเมาส์ // ส่งผลให้มีสี่เหลี่ยมเล็กๆ หลายช่องโดยมีเมาส์เป็นศูนย์กลาง mouse.max /2 คือรัศมีที่จะสร้างวงกลมถ้า (x === เมาส์ && ระยะทาง > x.max / 2) { ix = ix - 0.03 * x_diff; iy = iy - 0.03 * y_diff; Distance) / x.max; context.beginPath(); // กำหนดความหนาของเส้นแปรงให้สัมพันธ์กับระยะห่างระหว่างสี่เหลี่ยมเล็ก ๆ ทั้งสอง ซึ่งอยู่ระหว่าง 0-0.5 ยิ่งเส้นบางลงถึงสูงสุด เส้นจะหายไปเมื่อวาดเส้นบริบท lineWidth = A / 2; // ตั้งค่าสีของเส้นแปรงเป็น sc ซึ่งเป็นสีผืนผ้าใบและความโปร่งใสเป็น (A+0.2) นั่นคือ ยิ่งช่องสี่เหลี่ยมเล็ก ๆ สองอันอยู่ห่างจากเส้นนั้นมากเท่าไร Context. strokeStyle = rgba ( + attr.color + , + (A + 0.2) + ); // ตั้งค่าจังหวะแปรงเป็นบริบทสี่เหลี่ยมจัตุรัสเล็ก imoveTo(ix, iy); // เลื่อนจังหวะแปรงไปที่บริบทสี่เหลี่ยมจัตุรัสเล็ก x.lineTo(xx , xy); // วาดเส้นให้สมบูรณ์ นั่นคือ วาดเส้นที่เชื่อมต่อบริบทสี่เหลี่ยมเล็ก ๆ จังหวะ (); // ลบสี่เหลี่ยมเล็ก i ออกจากอาร์เรย์ w // ป้องกันไม่ให้สี่เหลี่ยมเล็ก ๆ สองอันเชื่อมต่อกันซ้ำ ๆ w.splice(w.indexOf(i), 1); }); //window.requestAnimationFrame คล้ายกับ setTimeout ทำให้เกิดการเรียกซ้ำ , //อย่างไรก็ตาม window.requestAnimationFrame ใช้ช่วงเวลาของระบบเพื่อรักษาประสิทธิภาพการวาดภาพที่ดีที่สุด และให้การปรับให้เหมาะสมที่ดีกว่าเพื่อทำให้ภาพเคลื่อนไหวราบรื่นขึ้น//หลังจากการเพิ่มประสิทธิภาพของเบราว์เซอร์ ภาพเคลื่อนไหวจะราบรื่นขึ้น // เมื่อหน้าต่างไม่ได้เปิดใช้งาน ภาพเคลื่อนไหวจะหยุดเพื่อบันทึกทรัพยากรการคำนวณ } // ที่นี่ หลังจากรอเป็นเวลา 0.1 วินาที ให้ดำเนินการวาด () หนึ่งครั้ง เอฟเฟกต์ภาพเคลื่อนไหวจริงคือ setTimeout ( ใช้งานโดย window .requestAnimationFrame ฟังก์ชั่น() { วาด(); }, 100)} ();ที่อยู่รหัสที่มา: https://github.com/jc1144096387/canvas_nest
สรุปด้านบนนี้เป็นโค้ดสำหรับแยกวิเคราะห์ html5 canvas เพื่อให้ได้เอฟเฟกต์ไดนามิกของการเชื่อมต่อเมาส์ในพื้นหลัง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!