تصف هذه المقالة تأثير JS بناءً على علامات Canvas HTML5 لتحقيق تأثير كرة Hue. شاركه للرجوع إليه ، على النحو التالي:
لقطة شاشة تأثير الجري كما يلي:
الرمز المحدد كما يلي:
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> JS canvas tag لجعل كرات hue </title> </head> <body> <body> <canvas> </canvas> <script type = "text/javascript"> var ، ctx ، max canvas = document.getElementsByTagName ('canvas') [0] ؛ ctx = canvas.getContext ('2d') ؛ canvas.width = canvas.hight = 400 ؛ CTX.FillRect (0،0،400،400) ؛ كحد أقصى = 80 ؛ العد = 150 ؛ p = [] ؛ ص = 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 () ؛} ؛ 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 = "أخف وزنا" ؛ تيم = العد/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 ++) {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 بشكل أفضل.
لمزيد من المعلومات حول المحتوى المتعلق بـ JavaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لمهارات الرسم الرسومية JavaScript" ، "ملخص لتبديل المؤثرات الخاصة والمهارات الخاصة" ، ملخص لمهارات البحث عن JavaScript و "ملخص". المهارات "،" ملخص خوارزمية JavaScript Traversal والمهارات "و" ملخص استخدام JavaScript للعمليات الرياضية "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.