Cet article décrit l'effet de JS basé sur les balises de canevas HTML5 pour réaliser l'effet de balle de teinte. Partagez-le pour votre référence, comme suit:
La capture d'écran de l'effet de course est la suivante:
Le code spécifique est le suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <tight> tag js canvas to make hue balls </ title> </ad> <body> <canvas> </ canvas> <script type = "text / javascript"> var canvas, ctx, max, p, count; windows.on.on.on. canvas = document.getElementsByTagName ('canvas') [0]; ctx = canvas.getContext ('2d'); canvas.width = canvas.height = 400; CTX.FillRect (0,0,400 400); max = 80; comptage = 150; p = []; r = 0; pour (a = 0; a <max; a ++) {p.push ([math.cos (r), math.sin (r), 0]); r + = math.pi * 2 / max; } pour (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]); pour (a = 0; a <max; a ++) p.push ([p [a] [1], 0, p [a] [0]]); Rus ();}; fonction 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; pour (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; pour (d = 0; d <3; d ++) {pour (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);} </cript> </body> </html>PS: Étant donné que HTML5 est utilisé ici, les lecteurs sont invités à utiliser des navigateurs tels que Firefox, Google et Opera pour exécuter le code ci-dessus avec de meilleurs effets HTML5.
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des compétences de dessin graphique JavaScript", "Résumé des compétences en algorithme JavaScript Switching Special", "Résumé des effets spéciaux et compétences de la recherche JavaScript", "Résumé des compétences en JavaScript Animation spéciale et des effets spéciaux", résumé des erreurs de données javascrip Compétences "," Résumé de l'algorithme de traversée JavaScript et des compétences "et" Résumé de l'utilisation de l'opération mathématique JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.