Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { padding: 0;overflow: hidden } canvas { display: block; }
JavaScript
$(function() { var canvas = $('#canvas')[0]; canvas.width = $(window).width(); canvas.height = $(window).height(); var ctx = canvas.getContext('2d'); // resize $(window).on('resize', function() { canvas.width = $(window).width(); canvas.height = $(window).height(); ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); }); // init ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); // objects var listFire = []; var listFirework = []; var fireNumber = 10; var center = { x: canvas.width / 2, y: canvas.height / 2 }; var range = 100; for (var i = 0; i < fireNumber; i++) { var fire = { x: Math.random() * range / 2 - range / 4 + center.x, y: Math.random() * range * 2 + canvas.height, size: Math.random() + 0.5, fill: '#fd1', vx: Math.random() - 0.5, vy: -(Math.random() + 4), ax: Math.random() * 0.02 - 0.01, far: Math.random() * range + (center.y - range) }; fire.base = { x: fire.x, y: fire.y, vx: fire.vx }; // listFire.push(fire); } function randColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var color = 'rgb($r, $g, $b)'; color = color.replace('$r', r); color = color.replace('$g', g); color = color.replace('$b', b); return color; } (function loop() { requestAnimationFrame(loop); update(); draw(); })(); function update() { for (var i = 0; i < listFire.length; i++) { var fire = listFire[i]; // if (fire.y <= fire.far) { // case add firework var color = randColor(); for (var i = 0; i < fireNumber * 5; i++) { var firework = { x: fire.x, y: fire.y, size: Math.random() + 1.5, fill: color, vx: Math.random() * 5 - 2.5, vy: Math.random() * -5 + 1.5, ay: 0.05, alpha: 1, life: Math.round(Math.random() * range / 2) + range / 2 }; firework.base = { life: firework.life, size: firework.size }; listFirework.push(firework); } // reset fire.y = fire.base.y; fire.x = fire.base.x; fire.vx = fire.base.vx; fire.ax = Math.random() * 0.02 - 0.01; } // fire.x += fire.vx; fire.y += fire.vy; fire.vx += fire.ax; } for (var i = listFirework.length - 1; i >= 0; i--) { var firework = listFirework[i]; if (firework) { firework.x += firework.vx; firework.y += firework.vy; firework.vy += firework.ay; firework.alpha = firework.life / firework.base.life; firework.size = firework.alpha * firework.base.size; firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha; // firework.life--; if (firework.life <= 0) { listFirework.splice(i, 1); } } } } function draw() { // clear ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = 0.18; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); // re-draw ctx.globalCompositeOperation = 'screen'; ctx.globalAlpha = 1; for (var i = 0; i < listFire.length; i++) { var fire = listFire[i]; ctx.beginPath(); ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = fire.fill; ctx.fill(); } for (var i = 0; i < listFirework.length; i++) { var firework = listFirework[i]; ctx.globalAlpha = firework.alpha; ctx.beginPath(); ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = firework.fill; ctx.fill(); } } })
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas烟花 新年快乐!-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号