Comentário: Este exemplo usa o elemento de tela do HTML5 para exibir uma chama de batida na tela, e a chama seguirá o cursor.
O código completo desse efeito é o seguinte. Salve o código em um arquivo HTML e abra -o para visualizar o efeito. A chama seguirá o cursor:
<! Doctype html>
<head>
<meta charset = utf-8 " />
<title> HTML5 Efeito de chama da tela </ititle>
<style type = "text/css">
corpo {margem: 0; preenchimento: 0;}
#Canvas-Keleyi-com {Display: Block;}
</style>
</head>
<Body>
<lVAs> </canvas>
<script type = "text/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 peças = [];
var mouse = {}; </p> <p> // Vamos criar algumas partes agora
var partl_count = 100;
para (var i = 0; i <partícula_count; i ++)
{
partes.push (new partícula ());
}
keleyi_canvas.addeventListener ('mousemove', track_mouse, false); </p> <p> função track_mouse (e)
{
mouse.x = e.pagex;
mouse.y = e.pagey;
} </p> <p> função partícula ()
{
this.speed = {x: -2.5+math.random ()*5, y: -15+math.random ()*10};
// Localização = coordenadas do mouse
// agora a chama segue as coordenadas do mouse
if (mouse.x && mouse.y)
{
this.Location = {x: mouse.x, y: mouse.y};
}
outro
{
this.Location = {x: w/2, y: h/2};
}
// Radius Range = 10-30
this.radius = 10+math.random ()*20;
// faixa de vida = 20-30
this.life = 20+math.random ()*10;
this.remaining_life = this.life;
// cores
this.r = math.round (math.random ()*255);
this.g = math.round (math.random ()*255);
this.b = math.round (math.random ()*255);
} </p> <p> função desenhe ()
{
ctx.GlobalComPoToperation = "Source-Over";
ctx.fillstyle = "preto";
ctx.FillRect (0, 0, W, H);
ctx.globalComposePoperation = "mais leve"; </p> <p> para (var i = 0; i <partes.length; i ++)
{
var p = partes [i];
ctx.BeginPath ();
P.Opacity = Math.Round (P.Remaining_life/P.Life*100)/100
var gradiente = ctx.CreamRadialGradient (p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
gradiente.addcolorstop (0, "rgba ("+p.r+","+p.g+","+p.b+","+p.Opacity+")");
gradiente.addcolorstop (0,5, "rgba ("+p.r+","+p.g+","+p.b+","+p.Opacity+")");
gradiente.addcolorstop (1, "rgba ("+p.r+","+p.g+","+p.b+", 0)");
ctx.fillstyle = gradiente;
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)
{
categorias [i] = nova categoria ();
}
}
} </p> <p> setInterval (desenho, 86);
}
</script>
</body>
</html>