예제 튜토리얼 HTML5 캔버스 슈퍼 멋진 불꽃놀이 꽃 애니메이션 구현 code

이것은 멋진 HTML5 Canvas 애니메이션입니다. 우리의 실제 생활에 피어나는 불꽃의 특수 효과를 시뮬레이션합니다. 그 효과는 매우 현실적이지만 결국 여자 친구를 데리고 가더라도 컴퓨터 시뮬레이션입니다. 아직은 효과가 좀 부족해요,헤헤. 이 HTML5 Canvas 애니메이션의 뛰어난 점 중 하나는 성능입니다. Chrome에서는 불꽃놀이를 많이 해도 기본적으로 지연이 없습니다.

이 HTML5 불꽃 특수 효과를 구현하기 위한 프로세스와 코드를 간략하게 분석해 보겠습니다. 주로 HTML 코드, CSS 코드, Javascript 코드로 구성됩니다. 물론 가장 중요한 것은 javascript 코드입니다.

　HTML 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

<div id=”gui”>div>
<div id=”캔버스-컨테이너”> <div id=”mountains2″>div>
<div id=”mountains1″ >div><div id=”스카이라인”>div> div>

HTML의 구조는 매우 간단합니다. 즉, 캔버스 컨테이너가 구성되고 JS를 사용하여 이 컨테이너에 Canvas 개체를 생성합니다. 최종 JS 코드를 보면 알 수 있습니다.

　CSS 코드:

CSS 코드클립보드에 콘텐츠 복사

#캔버스-컨테이너 { 배경: #000 url(bg.jpg); 높이: 400px; 왼쪽: 50%; 여백: -200px 0 0 -300px; 위치: 절대; 상위: 50%; 너비: 600px; z-색인: 2;
} 캔버스 { 커서: 십자선; 디스플레이: 차단; 위치: 친척; z-색인: 3;
} 캔버스:활성 { 커서: 십자선;
} #skyline { 배경: url (skyline.png) 반복-x 50% 0; 하단하단: 0; 높이: 135px; 왼쪽: 0; 위치: 절대; 너비: 100%; z-색인: 1;
} #mountains1 { 배경: url (mountains1.png) 반복-x 40% 0; 하단하단: 0; 높이: 200px; 왼쪽: 0; 위치: 절대; 너비: 100%; z-색인: 1;
} #mountains2 { 배경: url (mountains2.png) 반복-x 30% 0; 하단하단: 0; 높이: 250px; 왼쪽: 0; 위치: 절대; 너비: 100%; z-색인: 1;
} #gui { 맞아맞아: 0; 위치: 고정; 상단: 0; z-색인: 3;
}

CSS 코드는 특별한 것이 없으며 주로 배경색과 테두리를 정의합니다.

다음은 가장 중요한 자바스크립트 코드입니다.

　자바스크립트 코드:

JavaScript 코드클립보드에 콘텐츠 복사

self.init = 함수(){
self.dt = 0;
self.oldTime = Date.now();
self.canvas = document.createElement('캔버스');
self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');
self.canvas.onselectstart = 함수() { return false;
};
self.canvas.width = self.cw = 600;
self.canvas.height = self.ch = 400;
self.particles = [];
self.partCount = 30;
self.fireworks = [];
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 170;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 150;
self.hueMax = 200;
self.fworkSpeed = 2;
self.fworkAccel = 4;
self.hueVariance = 30;
self.flickerDensity = 20;
self.showShockwave = false;
self.showTarget = 참;
self.clearAlpha = 25;
self.canvasContainer.append(self.canvas);
self.ctx = self.canvas.getContext('2d');
self.ctx.lineCap = '둥근';
self.ctx.lineJoin = '둥근';
self.lineWidth = 1;
self.bindEvents();
self.canvasLoop();
self.canvas.onselectstart = 함수() { return false;
};
};

이 JS 코드는 주로 캔버스 컨테이너에 캔버스 객체를 구성하고, 캔버스 객체의 모양 및 애니메이션 속성을 초기화합니다.

JavaScript 코드클립보드에 콘텐츠 복사

var 입자 = 함수(x, y, hue){ 이것.x = x; 이것.y = y; 이것.coordLast = [
{x: x, y: y},
{x: x, y: y},
{x: x, y: y}
]; 이것.angle = rand(0, 360); 이것.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed self. partSpeedVariance)); 이것.friction = 1 - self.partFriction/100; 이것.gravity = self.partGravity/2; 이.hue = rand(hue-self.hueVariance, hue self.hueVariance); 이것.brightness = rand(50, 80); 이것.alpha = rand(40,100)/100; 이것.decay = rand(10, 50)/1000; 이것.wind = (rand(0, self.partWind) - (self.partWind/2))/25; 이것.lineWidth = self.lineWidth;
};
Particle.prototype.update = 함수(색인){ var 라디안 = this.angle * Math.PI / 180; var vx = Math.cos(라디안) * this.speed; var vy = Math.sin(radians) * this.speed this .중력; 이것.speed *= 이것.friction; 이것.coordLast[2].x = 이것.coordLast[1].x; 이것.coordLast[2].y = 이것.coordLast[1].y; 이것.coordLast[1].x = 이것.coordLast[0].x; 이것.coordLast[1].y = 이것.coordLast[0].y; 이것.coordLast[0].x = 이것.x; 이것.coordLast[0].y = 이것.y; 이것.x = vx * self.dt; 이것.y = vy * self.dt; 이.angle = 이.wind; 이것.alpha -= 이것.decay; if(!hitTest(0,0,self.cw,self.ch,this.x-이.radius, 이.y-이.radius, 이 .radius*2, 이.radius*2) || 이.alpha < .05 ){
self.particles.splice(index, 1);
}
};
Particle.prototype.draw = 함수(){ var coordRand = (rand(1,3) -1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(this.x), Math.round(this .와이));
self.ctx.closePath();
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.밝기 '%, ' 이것.alpha ')';
self.ctx.Stroke(); if(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){
self.ctx.beginPath();
self.ctx.arc(Math.round(this.x), Math.round(this .y), rand(this.lineWidth,this.lineWidth 3)/2, 0, Math.PI*2, 거짓) self.ctx.closePath(); var randAlpha = rand(50,100)/100;
self.ctx.fillStyle = 'hsla(' this.hue ' , 100%, ' 이것.brightness '%, ' randAlpha ' )';
self.ctx.fill();
}
}
};

　　这段JS代码的功能是实现烟꽃爆炸后의 小颗粒的绘绘即, 从draw방법中可以看流, 创建几个随机点,烟꽃颗粒即可在这个范围的随机点中散落。

JavaScript 코드复复内容到剪贴板

var Firework = 함수(startX, startY, targetX, targetY){ 이것.x = startX; 이것.y = startY; 이것.startX = startX; 이것.startY = startY; 이것.hitX = false; 이것.hitY = false; 이것.coordLast = [
{x: startX, y: startY},
{x: startX, y: startY},
{x: startX, y: startY}
]; 이것.targetX = targetX; 이것.targetY = targetY; 이것.speed = self.fworkSpeed; 이것.angle =Math.atan2(targetY - startY, targetX - startX); 이것.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); 이것.acceleration = self.fworkAccel/100; 이것.hue = self.currentHue; 이것.brightness = rand(50, 80); 이것.alpha = rand(50,100)/100; 이것.lineWidth = self.lineWidth; 이것.targetRadius = 1;
};
Firework.prototype.update = 함수(색인){
self.ctx.lineWidth = 이것.lineWidth;
vx = Math.cos(this.angle) * this.speed,
vy = Math.sin(this.angle) * this.speed; 이것.speed *= 1 이것.acceleration; 이것.coordLast[2].x = 이것.coordLast[1].x; 이것.coordLast[2].y = 이것.coordLast[1].y; 이것.coordLast[1].x = 이것.coordLast[0].x; 이것.coordLast[1].y = 이것.coordLast[0].y; 이것.coordLast[0].x = 이것.x; 이것.coordLast[0].y = 이것.y; if(self.showTarget){ if(this.targetRadius < 8){ 이것.targetRadius = .25 * self.dt;
} else { 이것.targetRadius = 1 * self.dt;
}
} if(이것.startX >= 이것.targetX){ if(this.x vx <= this.targetX){ 이.x = 이.targetX; 이것.hitX = 참;
} else { 이것.x = vx * self.dt;
}
} else { if(this.x vx >= 이것.targetX){ 이것.x = 이것 .targetX; 이것.hitX = 참;
} else { 이것.x = vx * self.dt;
}
} if(이것.startY >= 이것.targetY){ if(this.y vy <= this.targetY){ 이.y = 이.targetY; 이것.hitY = 참;
} else { 이것.y = vy * self.dt;
}
} else { if(this.y vy >= 이것.targetY){ 이것.y = 이것 .targetY; 이것.hitY = 참;
} else { 이것.y = vy * self.dt;
}
} if(이것.hitX && 이것.hitY){ var randExplosion = rand(0, 9);
self.createParticles(this.targetX, this.targetY, this.hue);
self.fireworks.splice(index, 1);
}
};
Firework.prototype.draw = 함수(){
self.ctx.lineWidth = 이것.lineWidth; var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(this.x), Math.round(this .와이));
self.ctx.closePath();
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.밝기 '%, ' 이것.alpha ')';
self.ctx.Stroke(); if(self.showTarget){
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(this.targetX), Math.round(this .targetY), 이것.targetRadius, 0, Math.PI*2, false)
self.ctx.closePath();
self.ctx.lineWidth = 1;
self.ctx.Stroke();
self.ctx.restore();
} if(self.showShockwave){
self.ctx.save();
self.ctx.translate(Math.round(this.x), Math.round(this .와이));
self.ctx.rotate(this.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI, 참);
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.brightness '%, ' 랜드(25, 60)/100 ')';
self.ctx.lineWidth = 이것.lineWidth;
self.ctx.Stroke();
self.ctx.restore();
}
};