Comentario: Este ejemplo usa el elemento lienzo de HTML5 para mostrar una llama de paliza en la pantalla, y la llama seguirá el cursor.
El código completo de este efecto es el siguiente. Guarde el código en un archivo HTML y ábralo para ver el efecto. La llama seguirá al cursor:
<! Doctype html>
<Evista>
<meta charset = utf-8 " />
<title> html5 lienvas Flame Effect </title>
<style type = "text/css">
cuerpo {margen: 0; relleno: 0;}
#Canvas-Keleyi-Com {display: block;}
</style>
</ablo>
<Body>
<Canvas> </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 partes = [];
var mouse = {}; </p> <p> // vamos a crear algunas partes ahora
var partícula_count = 100;
para (var i = 0; i <partícula_count; i ++)
{
Parts.push (nueva partícula ());
}
keleyi_canvas.addeventListener ('MouseMove', Track_mouse, False); </p> <p> function Track_mouse (e)
{
mouse.x = e.pagex;
mouse.y = e.pagey;
} </p> <p> Función partícula ()
{
this.speed = {x: -2.5+math.random ()*5, y: -15+math.random ()*10};
// ubicación = coordenadas del mouse
// Ahora la llama sigue a las coordenadas del mouse
if (mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
demás
{
this.location = {x: w/2, y: h/2};
}
// rango de radio = 10-30
this.radius = 10+math.random ()*20;
// Rango de vida = 20-30
this.life = 20+Math.random ()*10;
this.remaining_life = this.life;
//bandera
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 = "fuente-over";
ctx.fillstyle = "negro";
ctx.fillrect (0, 0, w, h);
ctx.globalComposeOperation = "Lighter"; </p> <p> for (var i = 0; i <parts.length; i ++)
{
var p = partes [i];
ctx.beginpath ();
P.Opacity = Math.round (P.Remaining_Life/P.Life*100)/100
VAR Gradiente = CTX.CreateradialGradient (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, falso);
ctx.fill (); </p> <p>
P.Remining_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)
{
categorías [i] = new Category ();
}
}
} </p> <p> setInterval (dibujo, 86);
}
</script>
</body>
</html>