주석 :이 예제는 HTML5의 캔버스 요소를 사용하여 화면에 치기 불꽃을 표시하며 불꽃이 커서를 따릅니다.
이 효과의 전체 코드는 다음과 같습니다. 코드를 HTML 파일에 저장하고 효과를 볼 수 있도록 열립니다. 불꽃은 커서를 따릅니다.
<! doctype html>
<헤드>
<meta charset = utf-8 " />
<title> html5 캔버스 불꽃 효과 </title>
<스타일 유형 = "텍스트/CSS">
신체 {마진 : 0; 패딩 : 0;}
#canvas-keleyi-com {display : block;}
</스타일>
</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> 함수 track_mouse (e)
{
mouse.x = e.pagex;
마우스 .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};
}
// 반경 범위 = 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 = "소스 오버";
ctx.fillstyle = "black";
ctx.fillRect (0, 0, w, h);
ctx.globalcompositeOperation = "가벼운"; </p> <p> for (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> if (p.remaining_life <0 || p.radius <0)
{
범주 [i] = 새로운 범주 ();
}
}
} </p> <p> setInterval (Draw, 86);
}
</스크립트>
</body>
</html>