이 기사는 HUE 볼 효과를 달성하기위한 HTML5 캔버스 태그를 기반으로 JS의 효과를 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
실행 효과의 스크린 샷은 다음과 같습니다.
특정 코드는 다음과 같습니다.
<! docType html> <html> <head> <메타 charset = "utf-8"/> <title> hue balls를 만들기위한 캔버스 태그 </title> </head> <corvas> </canvas> <script type = "text/javascript"> var canvas, ctx, p, count. 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; } for (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]; for (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 = "소스 오버"; ctx.fillstyle = "RGBA (0,0,0,0.03)"; ctx.fillRect (0,0, Canvas.Width, Canvas.Height); ctx.globalcompositeOperation = "가벼운"; 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 = []; (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>추신 : HTML5가 여기에서 사용되므로 독자는 Firefox, Google 및 Opera와 같은 브라우저를 사용하여 더 나은 HTML5 효과로 위의 코드를 실행하는 것이 좋습니다.
JavaScript 관련 콘텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 그래픽 그리기 기술의 요약", "JavaScript Switching 특수 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 특수 효과 및 기술 요약", "JavaScript 오류 및 Debgging Suction의 요약", "Javascript Suctort" 기술 ","JavaScript Traversal 알고리즘 및 기술 요약 "및"JavaScript 수학적 운영 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.