В этой статье описывается влияние JS на основе тегов HTML5 Canvas для достижения эффекта Hue Ball. Поделитесь этим для вашей ссылки, следующим образом:
Скриншот экрана бега выглядит следующим образом:
Конкретный код заключается в следующем:
<! Doctype html> <html> <head> <meta charset = "UTF-8"/> <Title> JS Canvas Tag, чтобы сделать Hue Balls </title> </head> <body> <canvas> </canvas> <script type = "text/javascript"> var canvas, ctx, max, p, pript. 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; for (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 ();}; function 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 = "LIGHTER"; tim = count/5; for (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 = []; for (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; for (d = 0; d <3; d ++) {for (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: Поскольку здесь используется HTML5, читателям рекомендуется использовать такие браузеры, как Firefox, Google и Opera, для запуска вышеуказанного кода с лучшими эффектами HTML5.
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 Навыки »,« Сводка алгоритма и навыков обхода JavaScript »и« Сводка математической операции JavaScript »»
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.