跨年夜，想请你看一场烟花秀！

代码分享地址：

链接：https://pan.baidu.com/s/1Cu_lKYfAlMBDttSzhVXPuQ 提取码：2ocd

代码效果展示：

源代码分享如下：

<!--* @Author: Xiao Wang* @Date: 2022-12-30 14:26* @Description:
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><style>body {margin: 0;padding: 0;overflow: hidden;}.city {width: 100%;position: fixed;bottom: 0px;z-index: 100;z-index: 10;}.city img {width: 100%;}#labels,#extra {/* color: rgb(106, 17, 11); */color: #daf6ff;text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);font-weight: bold;font-size: 2.8rem;position: absolute;width: 100%;text-align: center;opacity: 0;transition: all 0.5s ease-in-out;z-index: 100;top: 30%;}#labels.hide {opacity: 0;transform: scale(1);}#labels.show,#extra.show {opacity: 1;z-index: 100;transform: scale(1.3);}</style><title>Happy New Year</title></head><body onselectstart="return false"><canvas id="cas" style="background-color: rgba(0, 5, 24, 1)">浏览器不支持canvas</canvas><div id="labels"></div><div class="city"><img src="./city_2.png" alt="" /></div><img src="./moon.png" alt="" id="moon" style="visibility: hidden" /><div id="labels"></div><script>let __audio = document.createElement("audio");//修改音乐在这里__audio.src = "http://music.163.com/song/media/outer/url?id=28828078.mp3";__audio.loop = true;__audio.volume = 0.6;window.onclick = function () {__audio.play();};</script><script>let starCount = 1500;let starArr = new Array();//想要说的话在这里const my_labels = ["新的一年健健康康、平安喜乐!","日月有情迎元旦，山川无阻庆新年",];const shapes = [// "img$http://www.html5tricks.com/wp-content/uploads/2015/03/html5-canvas-drag-tree.png"];let canvas = document.getElementById("cas");let ocas = document.createElement("canvas");let octx = ocas.getContext("2d");let ctx = canvas.getContext("2d");ocas.width = canvas.width = window.innerWidth;ocas.height = canvas.height = window.innerHeight;let bigbooms = [];window.onload = function () {initAnimate();const labels = document.getElementById("labels");for (let i = 0; i < my_labels.length; i++) {setTimeout(() => {// labels.className = "hide";labels.innerHTML = my_labels[i];labels.className = "show";if (i < my_labels.length - 1) {setTimeout(() => {labels.className = "hide";}, 3000);}}, 3500 * (i + 1));}for (let i = 0; i < starCount; i++) {let star = new StarMore();star.randomColor();starArr.push(star);}showStars();};function initAnimate() {drawBg();lastTime = new Date();animate();}let lastTime;function animate() {ctx.save();ctx.globalCompositeOperation = "destination-out";ctx.globalAlpha = 0.1;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.restore();let newTime = new Date();if (newTime - lastTime > 200 + (window.innerHeight - 767) / 2) {let random = Math.random() * 100 > 2 ? true : false;let x = getRandom(canvas.width / 5, (canvas.width * 4) / 5);let y = getRandom(50, 200);if (random) {let bigboom = new Boom(getRandom(canvas.width / 3, (canvas.width * 2) / 3),2,"#FFF",{ x: x, y: y });bigbooms.push(bigboom);} else {let bigboom = new Boom(getRandom(canvas.width / 3, (canvas.width * 2) / 3),2,"#FFF",{x: canvas.width / 2,y: 200,},shapes[parseInt(getRandom(0, shapes.length))]);bigbooms.push(bigboom);}lastTime = newTime;}stars.foreach(function () {this.paint();});drawMoon();bigbooms.foreach(function (index) {let that = this;if (!this.dead) {this._move();this._drawLight();} else {this.booms.foreach(function (index) {if (!this.dead) {this.moveTo(index);} else if (index === that.booms.length - 1) {bigbooms.splice(bigbooms.indexOf(that), 1);}});}});raf(animate);}function drawMoon() {let moon = document.getElementById("moon");let centerX = canvas.width - 200,centerY = 100,width = 80;if (moon.complete) {ctx.drawImage(moon, centerX, centerY, width, width);} else {moon.onload = function () {ctx.drawImage(moon, centerX, centerY, width, width);};}let index = 0;for (let i = 0; i < 10; i++) {ctx.save();ctx.beginPath();ctx.arc(centerX + width / 2,centerY + width / 2,width / 2 + index,0,2 * Math.PI);ctx.fillStyle = "rgba(240,219,120,0.005)";index += 2;ctx.fill();ctx.restore();}}Array.prototype.foreach = function (callback) {for (let i = 0; i < this.length; i++) {if (this[i] !== null) callback.apply(this[i], [i]);}};let raf =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 10);};canvas.onclick = function () {let x = event.clientX;let y = event.clientY;let bigboom = new Boom(getRandom(canvas.width / 3, (canvas.width * 2) / 3),2,"#FFF",{ x: x, y: y });bigbooms.push(bigboom);};let Boom = function (x, r, c, boomArea, shape) {this.booms = [];this.x = x;this.y = canvas.height + r;this.r = r;this.c = c;this.shape = shape || false;this.boomArea = boomArea;this.theta = 0;this.dead = false;this.ba = parseInt(getRandom(80, 200));let audio = document.getElementsByTagName("audio");for (let i = 0; i < audio.length; i++) {if (audio[i].src.indexOf("shotfire") >= 0 &&(audio[i].paused || audio[i].ended)) {// audio[i].play();break;}}};Boom.prototype = {_paint: function () {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = this.c;ctx.fill();ctx.restore();},_move: function () {let dx = this.boomArea.x - this.x,dy = this.boomArea.y - this.y;this.x = this.x + dx * 0.01;this.y = this.y + dy * 0.01;if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {if (this.shape) {this._shapBoom();} else this._boom();this.dead = true;} else {this._paint();}},_drawLight: function () {ctx.save();ctx.fillStyle = "rgba(255,228,150,0.3)";ctx.beginPath();ctx.arc(this.x,this.y,this.r + 3 * Math.random() + 1,0,2 * Math.PI);ctx.fill();ctx.restore();},_boom: function () {let fragNum = getRandom(100, 300);let style = getRandom(0, 10) >= 5 ? 1 : 2;let color;if (style === 1) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255)),};}let fanwei = fragNum;let audio = document.getElementsByTagName("audio");for (let i = 0; i < audio.length; i++) {if (audio[i].src.indexOf("boom") >= 0 &&(audio[i].paused || audio[i].ended)) {// audio[i].play();break;}}for (let i = 0; i < fragNum; i++) {if (style === 2) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255)),};}let a = getRandom(-Math.PI, Math.PI);let x = getRandom(0, fanwei) * Math.cos(a) + this.x;let y = getRandom(0, fanwei) * Math.sin(a) + this.y;let radius = getRandom(0, 2);let frag = new Frag(this.x, this.y, radius, color, x, y);this.booms.push(frag);}},_shapBoom: function () {let that = this;putValue(ocas, octx, this.shape, 5, function (dots) {let dx = canvas.width / 2 - that.x;let dy = canvas.height / 2 - that.y;for (let i = 0; i < dots.length; i++) {color = { a: dots[i].a, b: dots[i].b, c: dots[i].c };let x = dots[i].x;let y = dots[i].y;let radius = 1;let frag = new Frag(that.x,that.y,radius,color,x - dx,y - dy);that.booms.push(frag);}});},};function putValue(canvas, context, ele, dr, callback) {context.clearRect(0, 0, canvas.width, canvas.height);let img = new Image();if (ele.indexOf("img") >= 0) {let _src = ele.split("$")[1];img.src = _src;imgload(img, function () {context.drawImage(img,canvas.width / 2 - img.width / 2,canvas.height / 2 - img.width / 2);console.log("dots");dots = getimgData(canvas, context, dr);callback(dots);});} else {let text = ele;context.save();let fontSize = 128;context.font = fontSize + "px 宋体 bold";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle ="rgba(" +parseInt(getRandom(128, 255)) +"," +parseInt(getRandom(128, 255)) +"," +parseInt(getRandom(128, 255)) +" , 1)";context.fillText(text, canvas.width / 2, canvas.height / 2);context.restore();dots = getimgData(canvas, context, dr);callback(dots);}}function imgload(img, callback) {if (img.complete) {callback.call(img);} else {img.onload = function () {callback.call(this);};}}function getimgData(canvas, context, dr) {let imgData = context.getImageData(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, canvas.width, canvas.height);let dots = [];for (let x = 0; x < imgData.width; x += dr) {for (let y = 0; y < imgData.height; y += dr) {let i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 128) {let dot = {x: x,y: y,a: imgData.data[i],b: imgData.data[i + 1],c: imgData.data[i + 2],};dots.push(dot);}}}return dots;}function getRandom(a, b) {return Math.random() * (b - a) + a;}let maxRadius = 1,stars = [];function drawBg() {for (let i = 0; i < 100; i++) {let r = Math.random() * maxRadius;let x = Math.random() * canvas.width;let y = Math.random() * 2 * canvas.height - canvas.height;let star = new Star(x, y, r);stars.push(star);star.paint();}}let Star = function (x, y, r) {this.x = x;this.y = y;this.r = r;};Star.prototype = {paint: function () {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = "rgba(255,255,255," + this.r + ")";ctx.fill();ctx.restore();},};let focallength = 250;let Frag = function (centerX, centerY, radius, color, tx, ty) {this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead = false;this.centerX = centerX;this.centerY = centerY;this.radius = radius;this.color = color;};Frag.prototype = {paint: function () {// ctx.beginPath();// ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);ctx.fillStyle ="rgba(" +this.color.a +"," +this.color.b +"," +this.color.c +",1)";ctx.fillRect(this.x - this.radius,this.y - this.radius,this.radius * 2,this.radius * 2);},moveTo: function (index) {this.ty = this.ty + 0.3;let dx = this.tx - this.x,dy = this.ty - this.y;this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;if (dx === 0 && Math.abs(dy) <= 80) {this.dead = true;}this.paint();},};let StarMore = function () {this.x = window.innerWidth * Math.random();this.y = 5000 * Math.random();this.text = ".";this.color = "white";this.randomColor = function () {let _r = Math.random();if (_r < 0.5) {this.color = "#333";} else {this.color = "white";}};};function showStars() {let canvas = document.getElementById("cas");context = canvas.getContext("2d");for (let n = 0; n < starCount; n++) {starArr[n].randomColor();context.fillStyle = starArr[n].color;context.fillText(starArr[n].text, starArr[n].x, starArr[n].y);}setTimeout("showStars()", 100);}// 代码参考来源：https://github.com/AndersonHJB/YearTiger2022</script></body>
</html>

跨年夜，想请你看一场烟花秀！相关推荐

快和她在圣诞节看一场烟花吧
写在前面
保姆级教程从零搭建云服务器(小彩蛋，请大家看烟花秀)
笔者已从零搭建好云服务器,在文章开始笔者请大家看一场简单的烟花秀,该篇博文是写给小白的保姆级教程,不论是有基础还是没基础的,都可以根据本篇博文,轻松搭建个人云服务器. 烟花秀:浏览器直接输入ysw.w ...
【MySQL】MySQL中的日期和时间函数有哪些？元宵节杭州灯光烟花秀你去看了吗？
日期函数元宵节灯光秀时间和日期函数获取当前日期的函数和获取当前时间的函数获取当前日期函数 UNIX时间戳函数返回UTC日期的函数和返回UTC时间的函数获取月份的函数MONTH(date)和 ...
有测试狗狗好坏的软件吗,想要养狗的朋友们请一定看完全文，测试一下自己适不适合养狗 ...
原标题:想要养狗的朋友们请一定看完全文,测试一下自己适不适合养狗朋友们如果你正有养一只狗狗的打算,小圈建议你做好准备别冲动,一定要把这篇文章先看完做好准备哦! 1.一定要纯种的狗狗才好吗? 买一 ...
2021跨年夜表白脱单情话句子零点跨年夜表白成功文案说说
2021跨年夜表白脱单情话句子 1. 第一次见到你,我就知道我栽了. 2. 我不会说很多动听的情话但我会陪你一辈子 3.旧一年,痛苦事情都忘记.新一年,幸福生活将伴临. 4.奔波一年又一年,道句辛苦 ...
挽回前任总结和经验教训（不想挽回不用看）
后真的不要纠缠!!很能理解大家刚被分手时的心情所以刚分手时纠缠那么一小会儿还是可以理解的也很正常又不是没有感情的杀手嘛你说是不是但千万不要一而再再而三的纠缠!!这样本来还有一两个联系方式的经 ...
想红必看！日漫十大最火题材
动画片世界中,有着很多似曾相识的动漫构造.动漫剧情,动漫背景之类的;没错,有的甚至出现率爆高!其实这些动漫的初衷都是由几段历史,几段题材而写下去的,只是人物或许不同,有些情节或许也被修改,当许许多多动 ...
怎么输出链表长度C语言,下面程序输出结果不，如输出的链表长度结果不对，不知有关问题在哪里。请高手看下...
当前位置:我的异常网» C语言 » 下面程序输出结果不,如输出的链表长度结果不对,不下面程序输出结果不,如输出的链表长度结果不对,不知有关问题在哪里.请高手看下 www.myexceptions.n ...
马上跨年了，用Python带你看一场跨年烟花秀
导语:你有多久没看过一场烟花了(源码放最后啦) 可算是在零点看到了一场灿烂烟花~小时候每年跨年都是要买一堆各式各样的烟花发的,仙女棒~冲天炮年年都玩不腻.可是后来污染实在是太严重,小孩放烟花的安全隐患 ...

跨年夜，想请你看一场烟花秀！

跨年夜，想请你看一场烟花秀！相关推荐

最新文章

热门文章