Beispiel-Tutorial HTML5 Canvas Super coole Feuerwerks-Blütenanimation Implementierungscode_html5 Tutorial-Fähigkeiten

Dies ist eine coole HTML5-Canvas-Animation. Sie simuliert die animierten Spezialeffekte eines Feuerwerks in unserem wirklichen Leben. Der Effekt ist sehr realistisch, aber es handelt sich schließlich um eine Computersimulation Der Effekt ist immer noch etwas dürftig, hehe. Das Besondere an dieser HTML5-Canvas-Animation ist ihre Leistung. Es gibt im Grunde keine Verzögerungen in Chrome, selbst wenn Sie ein großes Feuerwerk abfeuern.

Lassen Sie uns kurz den Prozess und Code zur Implementierung dieses HTML5-Feuerwerks-Spezialeffekts analysieren. Er besteht hauptsächlich aus HTML-Code, CSS-Code und Javascript-Code.

　HTML-Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id=“gui“>div>
2. <div id=“canvas-container“> <div id=“mountains2″>div> 
3. <div id=”mountains1″ >div><div id=“skyline“>div> div>

Die Struktur von HTML ist sehr einfach, das heißt, es wird ein Canvas-Container erstellt, und wir werden JS verwenden, um ein Canvas-Objekt in diesem Container zu generieren. Sie werden es erkennen, wenn Sie sich den endgültigen JS-Code ansehen.

　CSS-Code:

CSS-CodeInhalt in die Zwischenablage kopieren

1. #canvas-container { Hintergrund: #000 URL(bg.jpg); Höhe: 400px; links: 50 %; Marge: -200px 0 0 -300px; Position: absolut; oben: 50 %; Breite: 600px; z-index: 2;   
2. } Leinwand { Cursor: Fadenkreuz; Anzeige: Blockieren; Position: relativ; z-index: 3;   
3. } canvas:active { Cursor: Fadenkreuz;   
4. } #skyline { Hintergrund: URL (skyline.png) wiederholen-x 50% 0; untenunten: 0; Höhe: 135px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;       
5. } #mountains1 { Hintergrund: URL (mountains1.png) wiederholen-x 40% 0; untenunten: 0; Höhe: 200px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;       
6. } #mountains2 { Hintergrund: URL (mountains2.png) wiederholen-x 30% 0; untenunten: 0; Höhe: 250px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;       
7. } #gui { rightright: 0; Position: fest; oben: 0; z-index: 3;   
8. }  

Der CSS-Code ist nichts Besonderes, er definiert hauptsächlich die Hintergrundfarbe und den Rahmen.

Als nächstes folgt der wichtigste Javascript-Code.

　Javascript-Code:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. self.init = function(){       
2.     self.dt = 0;   
3.         self.oldTime = Date.now();   
4.         self.canvas = document.createElement('canvas');                   
5.         self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');   
6.         self.canvas.onselectstart = function() { 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 = true;   
31.         self.clearAlpha = 25;   
32.   
33.         self.canvasContainer.append(self.canvas);   
34.         self.ctx = self.canvas.getContext('2d');   
35.         self.ctx.lineCap = 'round';   
36.         self.ctx.lineJoin = 'round';   
37.         self.lineWidth = 1;   
38.         self.bindEvents();               
39.         self.canvasLoop();   
40.   
41.         self.canvas.onselectstart = function() { return false;   
42.         };   
43.   
44.     };  

Dieser JS-Code erstellt hauptsächlich ein Canvas-Objekt im Canvas-Container und initialisiert das Erscheinungsbild und die Animationseigenschaften des Canvas-Objekts.

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. var Partikel = Funktion(x, y, hue){ dies.x = x; dies.y = y; dies.coordLast = [   
2.             {x: x, y: y},   
3.             {x: x, y: y},   
4.             {x: x, y: y}   
5.         ]; dies.angle = rand(0, 360); this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed   self. partSpeedVariance)); this.friction = 1 - self.partFriction/100; this.gravity = self.partGravity/2; this.hue = rand(hue-self.hueVariance, hue self.hueVariance); dies.brightness = rand(50, 80); dies.alpha = rand(40,100)/100; dies.decay = rand(10, 50)/1000; this.wind = (rand(0, self.partWind) - (self.partWind/2))/25; this.lineWidth = self.lineWidth;   
6.     };   
7.   
8.     Particle.prototype.update = function(index){ var radians =  this.angle * Math.PI / 180; var vx = Math.cos(radians) * this.speed; var vy = Math.sin(radians) * this.speed   this .Schwerkraft; this.speed *= this.friction; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; dies.x  = vx * self.dt; dies.y  = vy * self.dt; this.angle  = this.wind; this.alpha -= this.decay; if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this .radius*2, dieses.radius*2) || dieses.alpha < ){                       
9.             self.particles.splice(index, 1);       
10.         }               
11.     };   
12.   
13.     Particle.prototype.draw = function(){ 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 .y));   
17.         self.ctx.closePath();                   
18.         self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' dies.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, false)  self.ctx.closePath(); var randAlpha = rand(50,100)/100;   
22.                 self.ctx.fillStyle = 'hsla(' this.hue ' , 100 %, ' this.brightness '%, ' randAlpha ' )';   
23.                 self.ctx.fill();   
24.             }       
25.         }   
26.     };  

　　这段JS代码的功能是实现烟花爆炸后的小颗粒的绘制,从draw方法中可以看出，创建几个随机点，烟花颗粒即可在这个范围的随机点中散落.

JavaScript-Code复制内容到剪贴板

1. var Firework = function(startX, startY, targetX, targetY){ this.x = startX; dies.y = startY; dies.startX = startX; dies.startY = startY; this.hitX = false; dies.hitY = false; dies.coordLast = [   
2.             {x: startX, y: startY},   
3.             {x: startX, y: startY},   
4.             {x: startX, y: startY}   
5.         ]; dies.targetX = targetX; dies.targetY = targetY; this.speed = self.fworkSpeed; this.angle = Math.atan2(targetY - startY, targetX - startX); this.shockwaveAngle = Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)); this.acceleration = self.fworkAccel/100; this.hue = self.currentHue; dies.brightness = rand(50, 80); dies.alpha = rand(50,100)/100; this.lineWidth = self.lineWidth; this.targetRadius = 1;   
6.     };   
7.   
8.     Firework.prototype.update = Funktion(index){   
9.         self.ctx.lineWidth = this.lineWidth;   
10.   
11.         vx = Math.cos(this.angle) * this.speed,   
12.         vy = Math.sin(this.angle) * this.speed; this.speed *= 1   this.acceleration; this.coordLast[2].x = this.coordLast[1].x; this.coordLast[2].y = this.coordLast[1].y; this.coordLast[1].x = this.coordLast[0].x; this.coordLast[1].y = this.coordLast[0].y; this.coordLast[0].x = this.x; this.coordLast[0].y = this.y; if(self.showTarget){ if(this.targetRadius < 8){ this.targetRadius  = .25 * self.dt;   
13.             } else { this.targetRadius = 1 * self.dt;       
14.             }   
15.         } if(this.startX >= this.targetX){ if(this.x   vx <= this.targetX){ this.x = this.targetX; this.hitX = true;   
16.             } else { this.x  = vx * self.dt;   
17.             }   
18.         } else { if(this.x vx >= this.targetX){ this.x = this .targetX; this.hitX = true;   
19.             } else { this.x  = vx * self.dt;   
20.             }   
21.         } if(this.startY >= this.targetY){ if(this.y   vy <= this.targetY){ this.y = this.targetY; dies.hitY = wahr;   
22.             } else { this.y  = vy * self.dt;   
23.             }   
24.         } else { if(this.y vy >= this.targetY){ this.y = this .targetY; dies.hitY = wahr;   
25.             } else { this.y  = vy * self.dt;   
26.             }   
27.         } if(this.hitX && this.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 = function(){   
34.         self.ctx.lineWidth = this.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 .y));   
38.         self.ctx.closePath();   
39.         self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' dies.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), this.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 .y));   
51.             self.ctx.rotate(this.shockwaveAngle);   
52.             self.ctx.beginPath();   
53.             self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI,  wahr);   
54.             self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' rand(25, 60)/100 ')';   
55.             self.ctx.lineWidth = this.lineWidth;   
56.             self.ctx.Stroke();   
57.             self.ctx.restore();   
58.         }                                   
59.     };  

　　这段JS代码是创建烟花实例的, 我们也可以从draw方法中看出, 当我们鼠标点击画布中的某点时，烟花发射的目的地就在那个点上.

　　这款HTML5 Canvas之家，我们会努力分享更多优秀的文章.