Kommentar: Dieses Beispiel verwendet das Canvas -Element von HTML5, um eine schlagende Flamme auf dem Bildschirm anzuzeigen, und die Flamme folgt dem Cursor.
Der vollständige Code dieses Effekts ist wie folgt. Speichern Sie den Code in einer HTML -Datei und öffnen Sie ihn, um den Effekt anzuzeigen. Die Flamme folgt dem Cursor:
<! DocType html>
<kopf>
<meta charset = utf-8 " />
<title> html5 canvas flame effect </title>
<style type = "text/css">
Körper {Rand: 0; Polsterung: 0;}
#canvas-keleyi-com {display: block;}
</style>
</head>
<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.innnerwidth, H = Fenster.InnerHeight;
keleyi_canvas.width = w;
keleyi_canvas.height = h; </p> <p> var parts = [];
var maus = {}; </p> <p> // Lassen Sie uns jetzt einige Teile erstellen
var partikel_count = 100;
für (var i = 0; i <partikel_count; i ++)
{
Teils.push (neues Partikel ());
}
keleyi_canvas.addeventListener ('Mousemove', Track_mouse, False); </p> <p> Funktion track_mouse (e)
{
Maus.x = E.Pagex;
Maus.y = E.Pagey;
} </p> <p> Funktionspartikel ()
{
this.speed = {x: -2.5+math.random ()*5, y: -15+math.random ()*10};
// Ort = Mauskoordinaten
// Jetzt folgt die Flamme den Mauskoordinaten
if (maus.x && maus.y)
{
this.location = {x: maus.x, y: maus.y};
}
anders
{
this.location = {x: w/2, y: h/2};
}
// Radiusbereich = 10-30
this.radius = 10+math.random ()*20;
// Lebensbereich = 20-30
this.life = 20+math.random ()*10;
this.remaining_life = this.life;
// Farben
this.r = math.round (math.random ()*255);
this.g = math.round (math.random ()*255);
this.b = math.round (math.random ()*255);
} </p> <p> Funktion Draw ())
{
ctx.globalcompositeoperation = "Source-over";
Ctx.FillStyle = "Black";
Ctx.FillRect (0, 0, W, H);
ctx.globalcompositeoperation = "leichter"; </p> <p> für (var i = 0; i <parts.length; i ++)
{
var p = Teile [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 = Gradient;
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;
{
Kategorien [i] = neue Kategorie ();
}
}
} </p> <p> setInterval (zeichnen, 86);
}
</script>
</body>
</html>