Commentaire: Cet exemple utilise l'élément Canvas de HTML5 pour afficher une flamme de battement à l'écran, et la flamme suivra le curseur.
Le code complet de cet effet est le suivant. Enregistrez le code dans un fichier HTML et ouvrez-le pour afficher l'effet. La flamme suivra le curseur:
<! Doctype html>
<adal>
<Meta Charset = UTF-8 "/>
<Title> Html5 Canvas Flame Effect </Title>
<style type = "text / css">
corps {marge: 0; rembourrage: 0;}
# canvas-keleyi-com {affichage: bloc;}
</ style>
</ head>
<body>
<lebvas> </ canvas>
<script type = "text / javascript">
window.onload = function () {
var keleyi_canvas = document.getElementById ("canvas-kel" + "eyi-coc");
var ctx = keleyi_canvas.getContext ("2d");
var w = window.innerwidth, h = window.innerHeight;
keleyi_canvas.width = w;
keleyi_canvas.height = h; </p> <p> var parties = [];
var souris = {}; </p> <p> // permet de créer certaines pièces maintenant
var particule_count = 100;
pour (var i = 0; i <particule_count; i ++)
{
Parties.push (new particule ());
}
keleyi_canvas.addeventListener ('MouseMove', track_mouse, false); </p> <p> fonction track_mouse (e)
{
souris.x = e.pagex;
souris.y = e.pagey;
} </p> <p> fonction particule ()
{
this.speed = {x: -2.5 + math.random () * 5, y: -15 + math.random () * 10};
// Emplacement = coordonnées de la souris
// Maintenant, la flamme suit les coordonnées de la souris
if (mouse.x && mouse.y)
{
this.location = {x: souris.x, y: souris.y};
}
autre
{
this.location = {x: w / 2, y: h / 2};
}
// Plage de rayon = 10-30
this.radius = 10 + math.random () * 20;
// Plage de vie = 20-30
this.life = 20 + math.random () * 10;
this.remaining_life = this.life;
//couleurs
this.r = math.round (math.random () * 255);
this.g = math.round (math.random () * 255);
this.b = math.round (math.random () * 255);
} </p> <p> Fonction Draw ()
{
ctx.globalCompositeOperation = "Source-over";
ctx.fillStyle = "noir";
ctx.fillrect (0, 0, w, h);
ctx.globalCompositeOperation = "Light"; </p> <p> pour (var i = 0; i <part.length; i ++)
{
var p = pièces [i];
ctx.beginPath ();
p.opacity = math.round (p.reming_life / p.life * 100) / 100
Gradient var = 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.filstyle = gradient;
CTX.ARC (P.Location.x, P.Location.Y, P.Radius, Math.pi * 2, FALSE);
ctx.fill (); </p> <p>
p.remeing_life--;
P.Radius--;
P.Location.x + = P.Speed.x;
p.location.y + = p.speed.y; </p> <p> if (p.reming_life <0 || p.radius <0)
{
catégories [i] = new category ();
}
}
} </p> <p> setInterval (Draw, 86);
}
</cript>
</docy>
</html>