التعليق: يستخدم هذا المثال عنصر قماش HTML5 لعرض لهب ضرب على الشاشة ، وسوف يتبع Flame المؤشر.
الرمز الكامل لهذا التأثير هو كما يلي. احفظ الرمز إلى ملف HTML وفتحه لعرض التأثير. سوف يتبع اللهب المؤشر:
<! doctype html>
<head>
<meta charset = utf-8 " />
<title> HTML5 Canvas Flame Effect </title>
<type type = "text/css">
الجسم {الهامش: 0 ؛ الحشو: 0 ؛}
#canvas-keleyi-com {display: block ؛}
</style>
</head>
<body>
<Canvas> </tanvas>
<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 issicle_count = 100 ؛
لـ (var i = 0 ؛ i <inclessle_count ؛ i ++)
{
parts.push (جسيم جديد ()) ؛
}
keleyi_canvas.addeventListener ('mousemove' ، track_mouse ، false) ؛ </p> <p> track_mouse (e)
{
mouse.x = e.pagex ؛
mouse.y = e.pagey ؛
} </p> <p> جسيم الدالة ()
{
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} ؛
}
// RADIUS Range = 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 = "أخف وزنا" ؛ </p> <ps (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.createDialGradient (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+")") ؛
التدرج.
ctx.fillstyle = التدرج ؛
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] = فئة جديدة () ؛
}
}
} </p> <p> setInterval (draw ، 86) ؛
}
</script>
</body>
</html>