Dieser Artikel beschreibt den Effekt von JS auf der Grundlage von HTML5 -Canvas -Tags, um einen Farbton -Ball -Effekt zu erzielen. Teilen Sie es für Ihre Referenz wie folgt weiter:
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>JS canvas tag to make hue balls</title></head><body><canvas></canvas><script type="text/javascript">var canvas,ctx,max,p,count;window.onload=function(){ var a,b,r; canvas = document.getElementsByTagName ('canvas') [0]; ctx = canvas.getContext ('2d'); canvas.width = canvas.height = 400; CTX.FillRect (0,0,400.400); max = 80; count = 150; p = []; r = 0; für (a = 0; a <max; a ++) {p.push ([math.cos (r), math.sin (r), 0]); r+= math.pi*2/max; } für (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]); für (a = 0; a <max; a ++) p.push ([p [a] [1], 0, p [a] [0]]); rus ();}; Funktion rus () {var a, b, c, d, e, s, tim, p2, xp, yp, xp2, yp2, x, y, z, x1, y1, z1; ctx.globalcompositeoperation = "Source-over"; Ctx.FillStyle = "RGBA (0,0,0,0,03)"; Ctx.FillRect (0,0, Canvas.width, canvas.height); ctx.globalcompositeoperation = "leichter"; tim = count/5; für (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 = []; für (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; für (d = 0; d <3; d ++) {für (a = 0; a <max; a ++) {b = p2 [d*max+a]; C = p2 [((a+1)%max)+d*max]; 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 (); }}} count ++; RequestAnimationFrame (RUS);} </script> </body> </html>PS: Da HTML5 hier verwendet wird, wird den Lesern empfohlen, Browser wie Firefox, Google und Opera zu verwenden, um den obigen Code mit besseren HTML5 -Effekten auszuführen.
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Graphic Drawing Skills", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Fähigkeiten "," Zusammenfassung des JavaScript -Traversalalgorithmus und der Fähigkeiten "und" Zusammenfassung der Verwendung von JavaScript Mathematical Operation Nutzung ""
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.