Este artigo descreve o efeito do JS com base nas tags de tela HTML5 para obter o efeito da bola de matiz. Compartilhe -o para sua referência, como segue:
A captura de tela do efeito em execução é a seguinte:
O código específico é o seguinte:
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>JS canvas tag to make hue balls</title></head><body><canvas></canvas><script type="text/javascript">var canvas,ctx,max,p,count;window.onload=function(){ var a,b,r; canvas = document.getElementsByTagName ('Canvas') [0]; ctx = Canvas.getContext ('2D'); canvas.width = Canvas.Height = 400; ctx.FillRect (0,0,400.400); max = 80; contagem = 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 ();}; função rus () {var a, b, c, d, e, s, tim, p2, xp, yp, xp2, yp2, x, y, z, x1, y1, z1; ctx.GlobalComPoToperation = "Source-Over"; ctx.fillstyle = "rgba (0,0,0,0,03)"; ctx.fillRect (0,0, tela.width, canvas.Height); ctx.GlobalComPoToperation = "mais leve"; tim = contagem/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.LenLeng; 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: Como o HTML5 é usado aqui, os leitores são aconselhados a usar navegadores como Firefox, Google e Opera para executar o código acima com melhores efeitos 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 "," Resumo do Algoritmo e Habilidades de Traversal JavaScript "e" Resumo do Uso da Operação Matemática JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.