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

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

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

　HTML 코드:

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

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

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

　CSS 코드:

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

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

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

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

　자바스크립트 코드:

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

1. self.init = 함수(){       
2.     self.dt = 0;   
3.         self.oldTime = Date.now();   
4.         self.canvas = document.createElement('캔버스');                   
5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');   
6.         self.canvas.onselectstart = 함수() { return false;   
7.         };   
8.   
9.         self.canvas.width = self.cw = 600;   
10.         self.canvas.height = self.ch = 400;       
11.   
12.         self.particles = [];       
13.         self.partCount = 30;   
14.         self.fireworks = [];       
15.         self.mx = self.cw/2;   
16.         self.my = self.ch/2;   
17.         self.currentHue = 170;   
18.         self.partSpeed = 5;   
19.         self.partSpeedVariance = 10;   
20.         self.partWind = 50;   
21.         self.partFriction = 5;   
22.         self.partGravity = 1;   
23.         self.hueMin = 150;   
24.         self.hueMax = 200;   
25.         self.fworkSpeed = 2;   
26.         self.fworkAccel = 4;   
27.         self.hueVariance = 30;   
28.         self.flickerDensity = 20;   
29.         self.showShockwave = false;   
30.         self.showTarget = 참;   
31.         self.clearAlpha = 25;   
32.   
33.         self.canvasContainer.append(self.canvas);   
34.         self.ctx = self.canvas.getContext('2d');   
35.         self.ctx.lineCap = '둥근';   
36.         self.ctx.lineJoin = '둥근';   
37.         self.lineWidth = 1;   
38.         self.bindEvents();               
39.         self.canvasLoop();   
40.   
41.         self.canvas.onselectstart = 함수() { return false;   
42.         };   
43.   
44.     };  

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

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

1. var 입자 = 함수(x, y, hue){ 이것.x = x; 이것.y = y; 이것.coordLast = [   
2.             {x: x, y: y},   
3.             {x: x, y: y},   
4.             {x: x, y: y}   
5.         ]; 이것.angle = rand(0, 360); 이것.speed = rand(((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;   
6.     };   
7.   
8.     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 
9.             self.particles.splice(index, 1);       
10.         }               
11.     };   
12.   
13.     Particle.prototype.draw = 함수(){ var coordRand = (rand(1,3) -1);   
14.         self.ctx.beginPath();                                   
15.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
16.         self.ctx.lineTo(Math.round(this.x), Math.round(this .와이));   
17.         self.ctx.closePath();                   
18.         self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.밝기 '%, ' 이것.alpha ')';   
19.         self.ctx.Stroke(); if(self.flickerDensity > 0){ var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){   
20.                 self.ctx.beginPath();   
21.                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;   
22.                self.ctx.fillStyle = 'hsla(' this.hue ' , 100%, ' 이것.brightness '%, ' randAlpha ' )';   
23.                 self.ctx.fill();   
24.             }       
25.         }   
26.     };  

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

JavaScript 코드复复内容到剪贴板

1. var Firework = 함수(startX, startY, targetX, targetY){ 이것.x = startX; 이것.y = startY; 이것.startX = startX; 이것.startY = startY; 이것.hitX = false; 이것.hitY = false; 이것.coordLast = [   
2.             {x: startX, y: startY},   
3.             {x: startX, y: startY},   
4.             {x: startX, y: startY}   
5.         ]; 이것.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;   
6.     };   
7.   
8.     Firework.prototype.update = 함수(색인){   
9.         self.ctx.lineWidth = 이것.lineWidth;   
10.   
11.         vx = Math.cos(this.angle) * this.speed,   
12.         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 이것.targetRadius  = .25 * self.dt;   
13.             } else { 이것.targetRadius = 1 * self.dt;       
14.             }   
15.         } if(이것.startX >= 이것.targetX){ if(this.x   vx this.targetX){ 이.x = 이.targetX; 이것.hitX = 참;   
16.             } else { 이것.x  = vx * self.dt;   
17.             }   
18.         } else { if(this.x vx >= 이것.targetX){ 이것.x = 이것 .targetX; 이것.hitX = 참;   
19.             } else { 이것.x  = vx * self.dt;   
20.             }   
21.         } if(이것.startY >= 이것.targetY){ if(this.y   vy this.targetY){ 이.y = 이.targetY; 이것.hitY = 참;   
22.             } else { 이것.y  = vy * self.dt;   
23.             }   
24.         } else { if(this.y vy >= 이것.targetY){ 이것.y = 이것 .targetY; 이것.hitY = 참;   
25.             } else { 이것.y  = vy * self.dt;   
26.             }   
27.         } if(이것.hitX && 이것.hitY){  var randExplosion = rand(0, 9);   
28.             self.createParticles(this.targetX, this.targetY, this.hue);   
29.             self.fireworks.splice(index, 1);                       
30.         }   
31.     };   
32.   
33.     Firework.prototype.draw = 함수(){   
34.         self.ctx.lineWidth = 이것.lineWidth; var coordRand = (rand(1,3)-1);                       
35.         self.ctx.beginPath();                               
36.         self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));   
37.         self.ctx.lineTo(Math.round(this.x), Math.round(this .와이));   
38.         self.ctx.closePath();   
39.         self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.밝기 '%, ' 이것.alpha ')';   
40.         self.ctx.Stroke(); if(self.showTarget){   
41.             self.ctx.save();   
42.             self.ctx.beginPath();   
43.             self.ctx.arc(Math.round(this.targetX), Math.round(this .targetY), 이것.targetRadius, 0, Math.PI*2, false)   
44.             self.ctx.closePath();   
45.             self.ctx.lineWidth = 1;   
46.             self.ctx.Stroke();   
47.             self.ctx.restore();   
48.         } if(self.showShockwave){   
49.             self.ctx.save();   
50.             self.ctx.translate(Math.round(this.x), Math.round(this .와이));   
51.             self.ctx.rotate(this.shockwaveAngle);   
52.             self.ctx.beginPath();   
53.            self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI,  참);   
54.             self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' 이것.brightness '%, ' 랜드(25, 60)/100 ')';   
55.             self.ctx.lineWidth = 이것.lineWidth;   
56.             self.ctx.Stroke();   
57.             self.ctx.restore();   
58.         }                                  
59.     };  

　　这段JS代码是创建烟꽃实例的, 나는 当我们鼠标点击画布中的某点时, 烟点时, 烟花发射的目그 땅은 정말 아름답습니다.

　　这款HTML5 Canvas烟꽃效果的核心代码就是这样，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努력분享更多优秀的文章。