Komentar: Contoh ini menggunakan elemen kanvas HTML5 untuk menampilkan api pemukulan di layar, dan nyala api akan mengikuti kursor.
Kode lengkap dari efek ini adalah sebagai berikut. Simpan kode ke file HTML dan buka untuk melihat efeknya. Api akan mengikuti kursor:
<! Doctype html>
<head>
<meta charset = utf-8 " />
<title> HTML5 Canvas Flame Effect </iteme>
<type style = "text/css">
tubuh {margin: 0; padding: 0;}
#Canvas-Keleyi-Com {display: block;}
</tyle>
</head>
<body>
<Canvas> </an Canvas>
<type skrip = "Teks/JavaScript">
window.onload = function () {
var keleyi_canvas = document.geteLementById ("canvas-kel"+"Eyi-com");
var ctx = keleyi_canvas.getContext ("2d");
var w = window.innerwidth, h = window.innerheight;
keleyi_canvas.width = w;
keleyi_canvas.height = h; </p> <p> var bagian = [];
var mouse = {}; </p> <p> // mari kita buat beberapa bagian sekarang
var particle_count = 100;
untuk (var i = 0; i <particle_count; i ++)
{
parts.push (partikel baru ());
}
Keleyi_canvas.addeventListener ('mousemove', track_mouse, false); </p> <p> Function track_mouse (e)
{
mouse.x = e.pagex;
mouse.y = e.pagey;
} </p> <p> Partikel fungsi ()
{
this.speed = {x: -2.5+math.random ()*5, y: -15+math.random ()*10};
// Lokasi = koordinat tikus
// Sekarang nyala api mengikuti koordinat mouse
if (mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
kalau tidak
{
this.location = {x: w/2, y: h/2};
}
// rentang radius = 10-30
this.radius = 10+math.random ()*20;
// rentang hidup = 20-30
this.life = 20+math.random ()*10;
this.remaining_life = this.life;
// warna
this.r = math.round (math.random ()*255);
this.g = math.round (math.random ()*255);
this.b = math.round (math.random ()*255);
} </p> <p> function draw ()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillstyle = "hitam";
ctx.fillrect (0, 0, w, h);
ctx.globalCompositeOperation = "lebih ringan"; </p> <p> untuk (var i = 0; i <parts.length; i ++)
{
var p = bagian [i];
ctx.beginpath ();
p.opacity = math.round (p.remaining_life/p.life*100)/100
var gradient = ctx.createradialgradient (p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
gradient.addcolorstop (0, "rgba ("+p.r+","+p.g+","+p.b+","+p.opacity+")");
gradient.addcolorstop (0,5, "rgba ("+p.r+","+p.g+","+p.b+","+p.opacity+")");
gradient.addcolorstop (1, "rgba ("+p.r+","+p.g+","+p.b+", 0)");
ctx.fillstyle = gradien;
ctx.arc (p.location.x, p.location.y, p.radius, math.pi*2, false);
ctx.fill (); </p> <p>
p.remaining_life--;
P.Radius--;
p.location.x += p.speed.x;
p.location.y += p.speed.y; </p> <p> if (p.remaining_life <0 || p.radius <0)
{
kategori [i] = kategori baru ();
}
}
} </p> <p> SetInterval (Draw, 86);
}
</script>
</body>
</html>