Artikel ini menjelaskan efek JS berdasarkan tag kanvas HTML5 untuk mencapai efek bola rona. Bagikan untuk referensi Anda, sebagai berikut:
Tangkapan layar efek berjalan adalah sebagai berikut:
Kode spesifiknya adalah sebagai berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <itement> tag Canvas JS untuk membuat bola hue </iteme> </head> <body> <canvas> </canvas> <script type = "text/javascript"> var canvas, ctx, max, p ncript = "Text/JavaScript"> var canvas, ctx, max, p script = "Text/JavaScript"> var canvas, ctx, p, p, pm. canvas = document.geteLementsByTagname ('canvas') [0]; ctx = canvas.getContext ('2d'); canvas.width = canvas.height = 400; ctx.fillrect (0,0,400,400); Max = 80; hitung = 150; p = []; r = 0; untuk (a = 0; a <max; a ++) {p.push ([math.cos (r), math.sin (r), 0]); r+= math.pi*2/maks; } untuk (a = 0; a <max; a ++) p.push ([0, p [a] [0], p [a] [1]]); untuk (a = 0; a <max; a ++) p.push ([p [a] [1], 0, p [a] [0]]); rus ();}; fungsi 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 = "lebih ringan"; Tim = Count/5; untuk (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 = []; untuk (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; untuk (d = 0; d <3; d ++) {untuk (a = 0; a <max; a ++) {b = p2 [d*max+a]; c = p2 [((a+1)%maks)+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: Karena HTML5 digunakan di sini, pembaca disarankan untuk menggunakan browser seperti Firefox, Google, dan Opera untuk menjalankan kode di atas dengan efek HTML5 yang lebih baik.
Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Keterampilan Menggambar Grafik Javascript", "Ringkasan JavaScript Mengalihkan Efek dan Keterampilan Khusus", "Ringkasan Keterampilan Pencarian JavaScript dan Ringkasan Struktur Javascript," Ringkasan Javascript dan ringkasan Javascript KETERLINGUAN JAVASCRIPS "Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascript" Ringkasan Javascript Keterampilan "," Ringkasan Algoritma dan Keterampilan Traversal JavaScript "dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.