Beispiel-Tutorial HTML5 Canvas Super coole Feuerwerks-Blütenanimation Implementierungscode_html5 Tutorial-Fähigkeiten-H5-Tutorial-php.cn

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

<div id=“gui“>div>
<div id=“canvas-container“> <div id=“mountains2″>div>
<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

#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;
} Leinwand { Cursor: Fadenkreuz; Anzeige: Blockieren; Position: relativ; z-index: 3;
} canvas:active { Cursor: Fadenkreuz;
} #skyline { Hintergrund: URL (skyline.png) wiederholen-x 50% 0; untenunten: 0; Höhe: 135px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;
} #mountains1 { Hintergrund: URL (mountains1.png) wiederholen-x 40% 0; untenunten: 0; Höhe: 200px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;
} #mountains2 { Hintergrund: URL (mountains2.png) wiederholen-x 30% 0; untenunten: 0; Höhe: 250px; links: 0; Position: absolut; Breite: 100 %; z-index: 1;
} #gui { rightright: 0; Position: fest; oben: 0; z-index: 3;
}

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

self.init = function(){
self.dt = 0;
self.oldTime = Date.now();
self.canvas = document.createElement('canvas');
self.canvasContainer = $('#canvas-container'); var canvasContainerDisabled = document.getElementById('canvas-container');
self.canvas.onselectstart = function() { 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 = true;
self.clearAlpha = 25;
self.canvasContainer.append(self.canvas);
self.ctx = self.canvas.getContext('2d');
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
self.lineWidth = 1;
self.bindEvents();
self.canvasLoop();
self.canvas.onselectstart = function() { return false;
};
};

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

var Partikel = Funktion(x, y, hue){ dies.x = x; dies.y = y; dies.coordLast = [
{x: x, y: y},
{x: x, y: y},
{x: x, y: y}
]; 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;
};
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 < ){
self.particles.splice(index, 1);
}
};
Particle.prototype.draw = function(){ 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 .y));
self.ctx.closePath();
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' dies.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, false) self.ctx.closePath(); var randAlpha = rand(50,100)/100;
self.ctx.fillStyle = 'hsla(' this.hue ' , 100 %, ' this.brightness '%, ' randAlpha ' )';
self.ctx.fill();
}
}
};

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

JavaScript-Code复制内容到剪贴板

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 = [
{x: startX, y: startY},
{x: startX, y: startY},
{x: startX, y: startY}
]; 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;
};
Firework.prototype.update = Funktion(index){
self.ctx.lineWidth = this.lineWidth;
vx = Math.cos(this.angle) * this.speed,
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;
} else { this.targetRadius = 1 * self.dt;
}
} if(this.startX >= this.targetX){ if(this.x vx <= this.targetX){ this.x = this.targetX; this.hitX = true;
} else { this.x = vx * self.dt;
}
} else { if(this.x vx >= this.targetX){ this.x = this .targetX; this.hitX = true;
} else { this.x = vx * self.dt;
}
} if(this.startY >= this.targetY){ if(this.y vy <= this.targetY){ this.y = this.targetY; dies.hitY = wahr;
} else { this.y = vy * self.dt;
}
} else { if(this.y vy >= this.targetY){ this.y = this .targetY; dies.hitY = wahr;
} else { this.y = vy * self.dt;
}
} if(this.hitX && this.hitY){ var randExplosion = rand(0, 9);
self.createParticles(this.targetX, this.targetY, this.hue);
self.fireworks.splice(index, 1);
}
};
Firework.prototype.draw = function(){
self.ctx.lineWidth = this.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 .y));
self.ctx.closePath();
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' dies.alpha ')';
self.ctx.Stroke(); if(self.showTarget){
self.ctx.save();
self.ctx.beginPath();
self.ctx.arc(Math.round(this.targetX), Math.round(this .targetY), this.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 .y));
self.ctx.rotate(this.shockwaveAngle);
self.ctx.beginPath();
self.ctx.arc(0, 0, 1*(this.speed/5), 0, Math.PI, wahr);
self.ctx.StrokeStyle = 'hsla(' this.hue ' , 100%, ' dies.brightness '%, ' rand(25, 60)/100 ')';
self.ctx.lineWidth = this.lineWidth;
self.ctx.Stroke();
self.ctx.restore();
}
};