บทความนี้อธิบายถึงผลกระทบของ JS ตามแท็ก HTML5 Canvas เพื่อให้ได้เอฟเฟกต์ Hue Ball แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ภาพหน้าจอของเอฟเฟกต์การทำงานมีดังนี้:
รหัสเฉพาะมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> js canvas แท็กเพื่อทำลูกบอล hue </title> </head> <body> <body> canvas = document.getElementsByTagname ('Canvas') [0]; ctx = canvas.getContext ('2d'); canvas.width = canvas.height = 400; ctx.fillrect (0,0,400,400); สูงสุด = 80; นับ = 150; p = []; r = 0; สำหรับ (a = 0; a <max; a ++) {p.push ([math.cos (r), math.sin (r), 0]); r+= math.pi*2/max; } สำหรับ (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]); สำหรับ (a = 0; a <max; a ++) p.push ([p [a] [1], 0, p [a] [0]]); rus ();}; ฟังก์ชั่น rus () {var a, b, c, d, e, s, tim, p2, xp, yp, xp2, yp2, x, y, z, x1, y1, z1; ctx.globalcompositeOperation = "แหล่งที่มา"; ctx.fillstyle = "rgba (0,0,0,0.03)"; ctx.fillrect (0,0, canvas.width, canvas.height); ctx.globalcompositeOperation = "เบา"; tim = count/5; สำหรับ (e = 0; e <3; e ++) {tim*= 1.7; S = 1-E/3; A = TIM/59; yp = math.cos (a); yp2 = math.sin (a); a = tim/23; xp = math.cos (a); xp2 = math.sin (a); p2 = []; สำหรับ (a = 0; a <p.length; a ++) {x = p [a] [0]; y = p [a] [1]; z = p [a] [2]; y1 = y*yp+z*yp2; z1 = y*yp2-z*yp; x1 = x*xp+z1*xp2; z = x*xp2-z1*xp; z1 = math.pow (2, z*s); x = x1*z1; y = y1*z1; p2.push ([x, y, z]); } s*= 120; สำหรับ (d = 0; d <3; d ++) {สำหรับ (a = 0; a <max; a ++) {b = p2 [d*max+a]; c = p2 [((a+1) สูงสุด)+d*สูงสุด]; ctx.beginpath (); ctx.strokestyle = "hsla ("+((a/max*360) | 0)+", 70%, 60%, 0.15)"; ctx.lineWidth = math.pow (6, b [2]); ctx.lineto (b [0]*s+200, b [1]*s+200); ctx.lineto (c [0]*s+200, c [1]*s+200); ctx.stroke (); }}} นับ ++; RequestAnimationFrame (rus);} </script> </body> </html>PS: เนื่องจากใช้ HTML5 ที่นี่ผู้อ่านจึงควรใช้เบราว์เซอร์เช่น Firefox, Google และ Opera เพื่อเรียกใช้รหัสด้านบนด้วยเอฟเฟกต์ HTML5 ที่ดีกว่า
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของเว็บไซต์นี้: "สรุปทักษะการวาดภาพกราฟิก JavaScript", "บทสรุปของการสลับเอฟเฟกต์และทักษะพิเศษ JavaScript", "สรุปทักษะการค้นหา JavaScript ทักษะ "," บทสรุปของอัลกอริทึมและทักษะการสำรวจ JavaScript Traversal "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน