コメント：この例では、HTML5のキャンバス要素を使用して画面に鼓動する炎を表示すると、炎はカーソルに従います。
この効果の完全なコードは次のとおりです。コードをHTMLファイルに保存し、それを開いて効果を表示します。炎はカーソルに続きます：
<！doctype html>
<head>
<メタcharset = utf-8 " />
<Title> HTML5 Canvas Flame Effect </title>
<style type = "text/css">
ボディ{マージン：0;パディング：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.innerwidth、h = window.innerheight;
keleyi_canvas.width = w;
keleyi_canvas.height = h; </p> <p> var parts = [];
var mouse = {}; </p> <p> //今すぐいくつかの部分を作成します
var particle_count = 100;
for（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};
// location =マウス座標
//これで、火炎はマウス座標に従います
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.remaining_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>関数draw（）
{
ctx.globalcompositeoperation = "source-over";
ctx.fillstyle = "black";
ctx.fillrect（0、0、w、h）;
ctx.globalcompositeoperation = "lighter"; </p> <p> for（var i = 0; i <parts.length; i ++）
{
var p = parts [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; </p> <p> if（p.remaining_life <0 || p.radius <0）
{
カテゴリ[i] = new category（）;
}
}
} </p> <p> setInterval（draw、86）;
}
</script>
</body>
</html>