Este artículo describe el efecto de JS basado en las etiquetas de lona HTML5 para lograr el efecto de la pelota de tono. Compártelo para su referencia, como sigue:
La captura de pantalla del efecto de ejecución es la siguiente:
El código específico es el siguiente:
<! Doctype html> <html> <fead> <meta charset = "utf-8"/> <title> js Canvas etiqueta para hacer bolas de tono </title> </head> <body> <Canvas> </ Canvas> <script type = "text/javascript"> var canvas, ctx, max, p, count; window.onload = free () {bex, b, b, b, b, b, b, var Canvas, ctx, max, p, count; window.onload = "script () {vAR, b, b, b, b, b, b, rable, ctx, max, p, count; window.onload = free () {vAR, b, b, b, b, b, b, b, b, b, r stavas, ctx, max, p, count; window.onload =" script (script) Canvas = document.getElementsBytagName ('Canvas') [0]; ctx = canvas.getContext ('2d'); Canvas.Width = Canvas.Height = 400; ctx.fillrect (0,0,400,400); max = 80; recuento = 150; p = []; r = 0; para (a = 0; a <max; a ++) {p.push ([math.cos (r), math.sin (r), 0]); r+= math.pi*2/max; } para (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]); para (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 = "fuente-over"; ctx.fillStyle = "RGBA (0,0,0,0.03)"; ctx.fillrect (0,0, Canvas.Width, Canvas.Height); ctx.globalCompositeOperation = "Lighter"; Tim = Count/5; para (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 = []; para (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; para (d = 0; d <3; d ++) {for (a = 0; a <max; a ++) {b = p2 [d*max+a]; c = p2 [(((a+1)%máx)+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>PD: Dado que HTML5 se usa aquí, se recomienda a los lectores que usen navegadores como Firefox, Google y Opera para ejecutar el código anterior con mejores efectos 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 Habilidades "," Resumen del algoritmo y habilidades de traversal JavaScript "y" Resumen del uso de la operación matemática de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.