วันนี้บรรณาธิการจะแชร์ซีรีส์คอลเลกชันเอฟเฟกต์พิเศษบนเว็บฉบับที่ 13 ให้กับคุณ เพื่อนๆ ที่ชอบเล่นเอฟเฟกต์เจ๋งๆ โปรดดูกัน ^_^
ฉันขอแชร์เอฟเฟกต์ข้อความน้ำตกที่สร้างขึ้นโดยใช้แคนวาส HTML5 ซึ่งเจ๋งมาก! รหัสที่เกี่ยวข้องมีดังนี้:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ การขยาย: 0; ระยะขอบ: 0;}body{ พื้นหลัง:#000 ;} </style></head><body> <div id=container> <canvas id=c></canvas></div><script type=text/javascript src=http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js></script><script> var c = document.getElementById(c);var ctx = c.getContext(2d) ;//ทำให้เต็มหน้าจอ c.height = window.innerHeight;c.width = window.innerWidth;//อักขระภาษาจีนจากชุดอักขระ Unicode var chinese = igeekbar~;//แปลงสตริงเป็นอักขระตัวเดียวในอาร์เรย์ chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //The number of columns in Rain//The number ของคอลัมน์ในแต่ละคอลัมน์ที่อาร์เรย์ var ลดลง = []; // ด้านล่างคือพิกัด x // 1 = y ในหยด (เหมือนกันในตอนแรก) for(var x = 0; x < columns; x++) drops[x] = 1 ; // วาดฟังก์ชันวาด () // ผ้าใบ BG สีดำ // แทร็กการแสดงผล BG กึ่งโปร่งใส ctx.fillStyle = rgba (0, 0, 0, 0.05); ความสูง); ctx.fillStyle = #0F0; // สีตัวอักษร ctx.font = font_size + px arial; // วนซ้ำแบบอักษรสำหรับ (var i = 0; i < drops.length; i++) { //พิมพ์ตัวอักษรจีนแบบสุ่ม var text = chinese[Math.floor()*chinese.length)]; //x = i*font_size, y = ค่าของหยด [i] * font_size ctx.fillText(ข้อความ, i*font_size, หยด[i]*font_size); //หลังจากวาดเส้นบนหน้าจอแล้ว ให้ส่งแบบสุ่มไปที่ด้านบน //เพิ่มการสุ่มในการรีเซ็ตเพื่อให้หยดกระจายไปทั่วแกน if(drops[i]*font_size > c.height && Math.random( ) > 0.975) ลดลง[i] = 0; // เพิ่มพิกัด Y ลดลง[i]++; }}setInterval(draw, 33);</script></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network