Комментарий: В этом примере используется Canvas Element HTML5 для отображения пламени на экране, а пламя будет следовать за курсором.
Полный код этого эффекта заключается в следующем. Сохраните код в файл HTML и откройте его для просмотра эффекта. Пламя будет следовать за курсором:
<! Doctype html>
<голова>
<meta charset = utf-8 " />
<title> HTML5 Canvas Flame Effect </title>
<стиль типа = "text/css">
Тело {маржа: 0; Надо: 0;}
#canvas-keleyi-com {display: block;}
</style>
</head>
<тело>
<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 = windows.innerwidth, h = window.innerheight;
keleyi_canvas.width = w;
keleyi_canvas.height = h; </p> <p> var parts = [];
var mouse = {}; </p> <p> // давайте создадим некоторые части сейчас
var particle_count = 100;
для (var i = 0; i <particle_count; i ++)
{
parts.push (new Particle ());
}
keleyi_canvas.addeventlistener ('mousemove', track_mouse, false); </p> <p> function track_mouse (e)
{
mouse.x = e.pagex;
Mouse.Y = E.Pagey;
} </p> <p> function particle ()
{
this.speed = {x: -2,5+math.random ()*5, y: -15+math.random ()*10};
// местоположение = координаты мыши
// теперь пламя следует за координатами мыши
if (mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
еще
{
this.location = {x: w/2, y: h/2};
}
// Радиус диапазон = 10-30
this.radius = 10+math.random ()*20;
// диапазон срока службы = 20-30
this.life = 20+math.random ()*10;
this.Reming_life = this.life;
// цвета
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 = "черный";
ctx.fillrect (0, 0, w, h);
ctx.globalcompositeoperation = "Ligher"; </p> <p> for (var i = 0; i <parts.length; i ++)
{
var p = parts [i];
ctx.beginpath ();
P.Opacity = Math.Round (P.Remaing_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.pacity+")");
gradient.addcolorstop (0,5, "rgba ("+p.r+","+p.g+","+p.b+","+p.Pacity+")");
gradient.addcolorstop (1, "rgba ("+p.r+","+p.g+","+p.b+", 0)");
ctx.fillstyle = gradient;
ctx.arc (p.location.x, p.location.y, p.radius, math.pi*2, false);
ctx.fill (); </p> <p>
P.Remaing_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)
{
категории [i] = новая категория ();
}
}
} </p> <p> setInterval (draw, 86);
}
</script>
</body>
</html>