ความคิดเห็น: ตัวอย่างนี้ใช้องค์ประกอบผ้าใบของ HTML5 เพื่อแสดงเปลวไฟที่เต้นบนหน้าจอและเปลวไฟจะตามเคอร์เซอร์
รหัสที่สมบูรณ์ของเอฟเฟกต์นี้มีดังนี้ บันทึกรหัสไปยังไฟล์ HTML และเปิดเพื่อดูเอฟเฟกต์ เปลวไฟจะตามเคอร์เซอร์:
<! doctype html>
<head>
<meta charset = utf-8 " />
<title> HTML5 Canvas Flame Effect </title>
<style type = "text/css">
ร่างกาย {มาร์จิ้น: 0; Padding: 0;}
#canvas-keleyi-com {display: block;}
</style>
</head>
<body>
<Canvas> </sanvas>
<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;
สำหรับ (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> ฟังก์ชั่นอนุภาค ()
-
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 RUNGE = 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> ฟังก์ชั่นการวาด ()
-
ctx.globalcompositeOperation = "แหล่งที่มา";
ctx.fillstyle = "ดำ";
ctx.fillrect (0, 0, w, h);
ctx.globalcompositeOperation = "เบา"; </p> <p> สำหรับ (var i = 0; i <parts.length; i ++)
-
var p = ส่วน [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 = การไล่ระดับสี;
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> ถ้า (p.remaining_life <0 || p.radius <0)
-
หมวดหมู่ [i] = หมวดหมู่ใหม่ ();
-
-
} </p> <p> setInterval (วาด, 86);
-
</script>
</body>
</html>