基于JavaScript实现在线网页烟花效果
短信预约 -IT技能 免费直播动态提醒
实现效果
关键步骤
随机颜色
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" class="lazy" data-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烟花内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
