Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Canvas to realize the special effect of fireworks in HTML5

2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"HTML5中怎么用Canvas实现烟花绽放特效",在日常操作中,相信很多人在HTML5中怎么用Canvas实现烟花绽放特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"HTML5中怎么用Canvas实现烟花绽放特效"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

代码如下:

XML/HTML Code复制内容到剪贴板

Canvas 实现放烟花特效

html,body{height:100%;margin:0;padding:0}

ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}

img{border:0}

body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}

canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}

#header img{width:100%; height:20%;}

#bg img{width:100%; height:80%;}

#header,#bg{position:fixed;left:0;right:0;z-index:10}

#header{top:0}

#bg{position:fixed;z-index:1;bottom:0}

audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}

$(function(){

var Fireworks = function(){

var self = this;

//generate random number of fireworks

var rand = function(rMi, rMa){

//bitwise negation operator

return ~~((Math.random()*(rMa-rMi+1))+rMi);

},hitTest = function(x1, y1, w1, h2, x2, y2, w2, h3){

return ! (x1 + w1

< x2 || x2 + w2 < x1 || y1 + h2 < y2 || y2 + h3 < y1); }; //请求动画帧 window.requestAnimFrame=function(){ return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback){ window.setTimeout(callback,1000/60); } }(); self.init = function(){ self.canvas = document.createElement('canvas'); //canvas 全屏 selfself.canvas.width = self.cw = $(window).innerWidth(); selfself.canvas.height = self.ch = $(window).innerHeight(); self.particles = []; self.partCount = 150; self.fireworks = []; selfself.mx = self.cw/2; selfself.my = self.ch/2; self.currentHue = 30; self.partSpeed = 5; self.partSpeedVariance = 10; self.partWind = 50; self.partFriction = 5; self.partGravity = 1; self.hueMin = 0; self.hueMax = 360; self.fworkSpeed = 4; self.fworkAccel = 10; self.hueVariance = 30; self.flickerDensity = 25; self.showShockwave = true; self.showTarget = false; self.clearAlpha = 25; $(document.body).append(self.canvas); selfself.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; }; }; // 创建粒子 self.createParticles = function(x,y, hue){ var countdown = self.partCount; while(countdown--){ var newParticle = { x: x, y: y, coordLast: [ {x: x, y: y}, {x: x, y: y}, {x: x, y: y} ], angle: rand(0, 360), speed: rand(((self.partSpeed - self.partSpeedVariance) 0){ var inverseDensity = 50 - self.flickerDensity; if(rand(0, inverseDensity) === inverseDensity){ self.ctx.beginPath(); self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false) self.ctx.closePath(); var randrandAlpha = rand(50,100)/100; self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')'; self.ctx.fill(); } } }; }; // 创建烟花 self.createFireworks = function(startX, startY, targetX, targetY){ var newFirework = { x: startX, y: startY, startX: startX, startY: startY, hitX: false, hitY: false, coordLast: [ {x: startX, y: startY}, {x: startX, y: startY}, {x: startX, y: startY} ], 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 }; self.fireworks.push(newFirework); }; // 更新烟花 self.updateFireworks = function(){ var i = self.fireworks.length; while(i--){ var f = self.fireworks[i]; self.ctx.lineWidth = f.lineWidth; vx = Math.cos(f.angle) * f.speed, vy = Math.sin(f.angle) * f.speed; f.speed *= 1 + f.acceleration; f.coordLast[2].x = f.coordLast[1].x; f.coordLast[2].y = f.coordLast[1].y; f.coordLast[1].x = f.coordLast[0].x; f.coordLast[1].y = f.coordLast[0].y; f.coordLast[0].x = f.x; f.coordLast[0].y = f.y; if(f.startX >

= f.targetX){

if(f.x + vx = f.targetX){

ff.x = f.targetX;

f.hitX = true;

} else {

f.x += vx;

}

}

if(f.startY >= f.targetY){

if(f.y + vy = f.targetY){

ff.y = f.targetY;

f.hitY = true;

} else {

f.y += vy;

}

}

if(f.hitX && f.hitY){

self.createParticles(f.targetX, f.targetY, f.hue);

self.fireworks.splice(i, 1);

}

};

};

// 绘制烟花

self.drawFireworks = function(){

var i = self.fireworks.length;

self.ctx.globalCompositeOperation = 'lighter';

while(i--){

var f = self.fireworks[i];

self.ctx.lineWidth = f.lineWidth;

var coordRand = (rand(1,3)-1);

self.ctx.beginPath();

self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));

self.ctx.lineTo(Math.round(f.x), Math.round(f.y));

self.ctx.closePath();

self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';

self.ctx.stroke();

if(self.showTarget){

self.ctx.save();

self.ctx.beginPath();

self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 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(f.x), Math.round(f.y));

self.ctx.rotate(f.shockwaveAngle);

self.ctx.beginPath();

self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);

self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';

self.ctx.lineWidth = f.lineWidth;

self.ctx.stroke();

self.ctx.restore();

}

};

};

// 绑定事件

self.bindEvents = function(){

$_(window).on('resize', function(){

clearTimeout(self.timeout);

self.timeout = setTimeout(function() {

selfself.canvas.width = self.cw = $(window).innerWidth();

selfself.canvas.height = self.ch = $(window).innerHeight();

self.ctx.lineCap = 'round';

self.ctx.lineJoin = 'round';

}, 100);

});

$(self.canvas).on('mousedown', function(e){

self.mx = e.pageX - self.canvas.offsetLeft;

self.my = e.pageY - self.canvas.offsetTop;

self.currentHue = rand(self.hueMin, self.hueMax);

self.createFireworks(self.cw/2, self.ch, self.mx, self.my);

$(self.canvas).on('mousemove.fireworks', function(e){

self.mx = e.pageX - self.canvas.offsetLeft;

self.my = e.pageY - self.canvas.offsetTop;

self.currentHue = rand(self.hueMin, self.hueMax);

self.createFireworks(self.cw/2, self.ch, self.mx, self.my);

});

});

$(self.canvas).on('mouseup', function(e){

$(self.canvas).off('mousemove.fireworks');

});

};

self.clear = function(){

self.particles = [];

self.fireworks = [];

self.ctx.clearRect(0, 0, self.cw, self.ch);

};

self.canvasLoop = function(){

requestAnimFrame(self.canvasLoop, self.canvas);

self.ctx.globalCompositeOperation = 'destination-out';

self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';

self.ctx.fillRect(0,0,self.cw,self.ch);

self.updateFireworks();

self.updateParticles();

self.drawFireworks();

self.drawParticles();

};

self.init();

}

var fworks = new Fireworks();

$('#info-toggle').on('click', function(e){

$('#info-inner').stop(false, true).slideToggle(100);

e.preventDefault();

});

});

到此,关于"HTML5中怎么用Canvas实现烟花绽放特效"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report