实现效果
关键步骤
随机颜色
var hue = Math.random() * 360;
var hueVariance = 30;
function setupColors(p){
p.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
p.brightness = Math.floor(Math.random() * 21) + 50;
p.alpha = (Math.floor(Math.random() * 61) + 40) / 100;
}
随机发射枪口
for (var i = 0; i < count; i++) {
//角度
var angle = 360 / count * i;
//弧度
var radians = angle * Math.PI / 180;
var p = {};
p.x = x;
p.y = y;
p.radians = radians;
//大小
p.size = Math.random()*2+1;
//速度
p.speed = Math.random()*5+.4;
//半径
p.radius = Math.random()*81+50;
p.fx = x + Math.cos(radians) * p.radius;
p.fy = y + Math.sin(radians) * p.radius;
setupColors(p);
particles.push(p);
}
每帧更新调用
//requestAnimationFrame
var lastStamp = 0;
function tick(opt=0) {
if(opt-lastStamp>2000){
lastStamp=opt;
createFireworks(Math.random()*canvas.width,Math.random()*canvas.height);
}
context.globalCompositeOperation = 'destination-out';
context.fillStyle ='rgba(0,0,0,'+10/100+')';
context.fillRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation = 'lighter';
drawFireworks();
requestAnimationFrame(tick);
}
tick();
源码
javascript:
!(function () {
var isDebug = false;
var textCanvas = document.createElement("canvas");
textCanvas.width=1000;
textCanvas.height=300;
if(isDebug){
textCanvas.style.position="absolute";
textCanvas.style.zIndex="9999";
document.body.appendChild(textCanvas);
}
var textctx = textCanvas.getContext("2d");
textctx.fillStyle = "#000000";
textctx.fillRect(0,0,textCanvas.width,textCanvas.height);
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.style.position= "fixed";
canvas.style.left = "0";
canvas.style.top = "0";
canvas.style.zIndex = -1;
var context = canvas.getContext("2d");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
clearCanvas();
}
function clearCanvas() {
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
function mouseDownHandler(e) {
var x = e.clientX;
var y = e.clientY;
//发射的文字
createFireworks(x, y,["1024","程序员节日快乐","去死吧 bug!"][Math.floor(Math.random()*3)]);
}
document.addEventListener("mousedown", mouseDownHandler);
var particles = [];
function createFireworks(x, y,text="") {
var hue = Math.random() * 360;
var hueVariance = 30;
function setupColors(p){
p.hue = Math.floor(Math.random() * ((hue + hueVariance) - (hue - hueVariance))) + (hue - hueVariance);
p.brightness = Math.floor(Math.random() * 21) + 50;
p.alpha = (Math.floor(Math.random() * 61) + 40) / 100;
}
if(text!=""){
var gap = 6;
var fontSize = 120;
textctx.font=fontSize+"px _sans";
textctx.fillStyle = "#ffffff";
var textWidth = Math.ceil(textctx.measureText(text).width);
var textHeight = Math.ceil(fontSize*1.2);
textctx.fillText(text,0,fontSize);
var imgData = textctx.getImageData(0,0,textWidth,textHeight);
if(isDebug)context.putImageData(imgData,400,300)
textctx.fillStyle = "#000000";
textctx.fillRect(0,0,textCanvas.width,textCanvas.height);
for (var h = 0; h < textHeight; h+=gap) {
for(var w = 0; w < textWidth; w+=gap){
var position = (textWidth * h + w) * 4;
var r = imgData.data[position], g = imgData.data[position + 1], b = imgData.data[position + 2], a = imgData.data[position + 3];
if(r+g+b==0)continue;
var p = {};
p.x = x;
p.y = y;
p.fx = x + w - textWidth/2;
p.fy = y + h - textHeight/2;
p.size = Math.floor(Math.random()*2)+1;
p.speed = 1;
setupColors(p);
particles.push(p);
}
}
}else{
var count = 100;
for (var i = 0; i < count; i++) {
//角度
var angle = 360 / count * i;
//弧度
var radians = angle * Math.PI / 180;
var p = {};
p.x = x;
p.y = y;
p.radians = radians;
//大小
p.size = Math.random()*2+1;
//速度
p.speed = Math.random()*5+.4;
//半径
p.radius = Math.random()*81+50;
p.fx = x + Math.cos(radians) * p.radius;
p.fy = y + Math.sin(radians) * p.radius;
setupColors(p);
particles.push(p);
}
}
}
function drawFireworks() {
clearCanvas();
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
p.x += (p.fx - p.x)/10;
p.y += (p.fy - p.y)/10-(p.alpha-1)*p.speed;
p.alpha -= 0.006;
if (p.alpha<=0) {
particles.splice(i, 1);
continue;
}
context.beginPath();
context.arc(p.x, p.y, p.size, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'hsla('+p.hue+',100%,'+p.brightness+'%,'+p.alpha+')';
context.fill();
}
}
//requestAnimationFrame
var lastStamp = 0;
function tick(opt=0) {
if(opt-lastStamp>2000){
lastStamp=opt;
createFireworks(Math.random()*canvas.width,Math.random()*canvas.height);
}
context.globalCompositeOperation = 'destination-out';
context.fillStyle ='rgba(0,0,0,'+10/100+')';
context.fillRect(0,0,canvas.width,canvas.height);
context.globalCompositeOperation = 'lighter';
drawFireworks();
requestAnimationFrame(tick);
}
tick();
})();
背景音乐自动播放
audio id="bgmusic" src="./bgm.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("bgmusic");//获取ID
console.log(music);
console.log(music.paused);
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
}
setInterval("toggleSound()",1);
</script>
到此这篇关于基于JavaScript实现在线网页烟花效果的文章就介绍到这了,更多相关JavaScript烟花内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
