目录
一，前言及效果图展示
二，修改你要显示的文字方法
三，写在最后的祝福
四，源代码
一，前言及效果图展示
源代码是在 GitHub上扒下来的噢，另外自己加上了流星雨特效，分享给有需要的小伙伴啦，看不惯那些还要开会员的，开源精神永存！
效果图展示：
二，修改你要显示的文字方法
如下：
假设你已经看过我的上上篇博客（包教会），已经下载好了vs code
接下来将其复制到vs code里，大约在代码363行附近有这样一段代码
其中countdown后面是倒计时秒数；后面|括起来的是单次显示的文字，这里会显示5次，大家自行修改即可/比心
三，写在最后的祝福
希望这段文字能够将那些看似复杂枯燥的代码转化为充满新年气氛的祝福，愿你在新的一年里，无论是在编程还是在生活的道路上，都能一帆风顺，心想事成！
最后的最后，如果对你有帮助的话，不要吝啬你的点赞收藏哦/嘻嘻~开玩笑的
四，源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5+Canvas漂亮的3D流星雨2025跨年特效</title>
<style>
html,
body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: #1de38d;
}
</style>
</head>
<body>
<canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
<canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas>
<audio id="myAudio" controls autoplay style="display: none;">
<source
src="https://webfs.ali.kugou.com/202212311401/c12fd67b0106b68294c3eb354aec3786/part/0/1516896/KGTX/CLTX001/clip_488850641544fb4c6e14e6b8356d084f.mp3"
type="audio/mpeg">
</audio>
<div class="overlay">
<div class="tabs">
<div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span
class="tabs-label">Share</span></div>
<div class="tabs-panels">
<ul class="tabs-panel commands">
</ul>
</div>
</div>
</div>
<script>
function initVars() {
pi = Math.PI;
ctx = canvas.getContext("2d");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
playerZ = -25;
playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0;
scale = 600;
seedTimer = 0; seedInterval = 5, seedLife = 100; gravity = .02;
seeds = new Array();
sparkPics = new Array();
s = "https://cantelope.org/NYE/";
for (i = 1; i <= 10; ++i) {
sparkPic = new Image();
sparkPic.src = s + "spark" + i + ".png";
sparkPics.push(sparkPic);
}
sparks = new Array();
pow1 = new Audio(s + "pow1.ogg");
pow2 = new Audio(s + "pow2.ogg");
pow3 = new Audio(s + "pow3.ogg");
pow4 = new Audio(s + "pow4.ogg");
frames = 0;
}
function rasterizePoint(x, y, z) {
var p, d;
x -= playerX;
y -= playerY;
z -= playerZ;
p = Math.atan2(x, z);
d = Math.sqrt(x * x + z * z);
x = Math.sin(p - yaw) * d;
z = Math.cos(p - yaw) * d;
p = Math.atan2(y, z);
d = Math.sqrt(y * y + z * z);
y = Math.sin(p - pitch) * d;
z = Math.cos(p - pitch) * d;
var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z, uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
if (!uc) return { x: 0, y: 0, d: -1 };
var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
if (!z) z = .000000001;
if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
return {
x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
y: cy + y / z * scale,
d: Math.sqrt(x * x + y * y + z * z)
};
} else {
return {
x: cx + (rx1 + ua * (rx2 - rx1)) * scale,
y: cy + y / z * scale,
d: -1
};
}
}
function spawnSeed() {
seed = new Object();
seed.x = -50 + Math.random() * 100;
seed.y = 25;
seed.z = -50 + Math.random() * 100;
seed.vx = .1 - Math.random() * .2;
seed.vy = -1.5;//*(1+Math.random()/2);
seed.vz = .1 - Math.random() * .2;
seed.born = frames;
seeds.push(seed);
}
function splode(x, y, z) {
t = 5 + parseInt(Math.random() * 150);
sparkV = 1 + Math.random() * 2.5;
type = parseInt(Math.random() * 3);
switch (type) {
case 0:
pic1 = parseInt(Math.random() * 10);
break;
case 1:
pic1 = parseInt(Math.random() * 10);
do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1);
break;
case 2:
pic1 = parseInt(Math.random() * 10);
do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1);
do { pic3 = parseInt(Math.random() * 10); } while (pic3 == pic1 || pic3 == pic2);
break;
}
for (m = 1; m < t; ++m) {
spark = new Object();
spark.x = x; spark.y = y; spark.z = z;
p1 = pi * 2 * Math.random();
p2 = pi * Math.random();
v = sparkV * (1 + Math.random() / 6)
spark.vx = Math.sin(p1) * Math.sin(p2) * v;
spark.vz = Math.cos(p1) * Math.sin(p2) * v;
spark.vy = Math.cos(p2) * v;
switch (type) {
case 0: spark.img = sparkPics[pic1]; break;
case 1:
spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2];
break;
case 2:
switch (parseInt(Math.random() * 3)) {
case 0: spark.img = sparkPics[pic1]; break;
case 1: spark.img = sparkPics[pic2]; break;
case 2: spark.img = sparkPics[pic3]; break;
}
break;
}
spark.radius = 25 + Math.random() * 50;
spark.alpha = 1;
spark.trail = new Array();
sparks.push(spark);
}
switch (parseInt(Math.random() * 4)) {
case 0: pow = new Audio(s + "pow1.ogg"); break;
case 1: pow = new Audio(s + "pow2.ogg"); break;
case 2: pow = new Audio(s + "pow3.ogg"); break;
case 3: pow = new Audio(s + "pow4.ogg"); break;
}
d = Math.sqrt((x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ));
/*pow.volume=1.5/(1+d/10)*/;
pow.play();
}
function doLogic() {
if (seedTimer < frames) {
seedTimer = frames + seedInterval * Math.random() * 10;
spawnSeed();
}
for (i = 0; i < seeds.length; ++i) {
seeds[i].vy += gravity;
seeds[i].x += seeds[i].vx;
seeds[i].y += seeds[i].vy;
seeds[i].z += seeds[i].vz;
if (frames - seeds[i].born > seedLife) {
splode(seeds[i].x, seeds[i].y, seeds[i].z);
seeds.splice(i, 1);
}
}
for (i = 0; i < sparks.length; ++i) {
if (sparks[i].alpha > 0 && sparks[i].radius > 5) {
sparks[i].alpha -= .01;
sparks[i].radius /= 1.02;
sparks[i].vy += gravity;
point = new Object();
point.x = sparks[i].x;
point.y = sparks[i].y;
point.z = sparks[i].z;
if (sparks[i].trail.length) {
x = sparks[i].trail[sparks[i].trail.length - 1].x;
y = sparks[i].trail[sparks[i].trail.length - 1].y;
z = sparks[i].trail[sparks[i].trail.length - 1].z;
d = ((point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z));
if (d > 9) {
sparks[i].trail.push(point);
}
} else {
sparks[i].trail.push(point);
}
if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1);
sparks[i].x += sparks[i].vx;
sparks[i].y += sparks[i].vy;
sparks[i].z += sparks[i].vz;
sparks[i].vx /= 1.075;
sparks[i].vy /= 1.075;
sparks[i].vz /= 1.075;
} else {
sparks.splice(i, 1);
}
}
p = Math.atan2(playerX, playerZ);
d = Math.sqrt(playerX * playerX + playerZ * playerZ);
d += Math.sin(frames / 80) / 1.25;
t = Math.sin(frames / 200) / 40;
playerX = Math.sin(p + t) * d;
playerZ = Math.cos(p + t) * d;
yaw = pi + p + t;
}
function rgb(col) {
var r = parseInt((.5 + Math.sin(col) * .5) * 16);
var g = parseInt((.5 + Math.cos(col) * .5) * 16);
var b = parseInt((.5 - Math.sin(col) * .5) * 16);
return "#" + r.toString(16) + g.toString(16) + b.toString(16);
}
function draw() {
ctx.clearRect(0, 0, cx * 2, cy * 2);
ctx.fillStyle = "#ff8";
for (i = -100; i < 100; i += 3) {
for (j = -100; j < 100; j += 4) {
x = i; z = j; y = 25;
point = rasterizePoint(x, y, z);
if (point.d != -1) {
size = 250 / (1 + point.d);
d = Math.sqrt(x * x + z * z);
a = 0.75 - Math.pow(d / 100, 6) * 0.75;
if (a > 0) {
ctx.globalAlpha = a;
ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
}
}
ctx.globalAlpha = 1;
for (i = 0; i < seeds.length; ++i) {
point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z);
if (point.d != -1) {
size = 200 / (1 + point.d);
ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);
}
}
point1 = new Object();
for (i = 0; i < sparks.length; ++i) {
point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z);
if (point.d != -1) {
size = sparks[i].radius * 200 / (1 + point.d);
if (sparks[i].alpha < 0) sparks[i].alpha = 0;
if (sparks[i].trail.length) {
point1.x = point.x;
point1.y = point.y;
switch (sparks[i].img) {
case sparkPics[0]: ctx.strokeStyle = "#f84"; break;
case sparkPics[1]: ctx.strokeStyle = "#84f"; break;
case sparkPics[2]: ctx.strokeStyle = "#8ff"; break;
case sparkPics[3]: ctx.strokeStyle = "#fff"; break;
case sparkPics[4]: ctx.strokeStyle = "#4f8"; break;
case sparkPics[5]: ctx.strokeStyle = "#f44"; break;
case sparkPics[6]: ctx.strokeStyle = "#f84"; break;
case sparkPics[7]: ctx.strokeStyle = "#84f"; break;
case sparkPics[8]: ctx.strokeStyle = "#fff"; break;
case sparkPics[9]: ctx.strokeStyle = "#44f"; break;
}
for (j = sparks[i].trail.length - 1; j >= 0; --j) {
point2 = rasterizePoint(sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z);
if (point2.d != -1) {
ctx.globalAlpha = j / sparks[i].trail.length * sparks[i].alpha / 2;
ctx.beginPath();
ctx.moveTo(point1.x, point1.y);
ctx.lineWidth = 1 + sparks[i].radius * 10 / (sparks[i].trail.length - j) / (1 + point2.d);
ctx.lineTo(point2.x, point2.y);
ctx.stroke();
point1.x = point2.x;
point1.y = point2.y;
}
}
}
ctx.globalAlpha = sparks[i].alpha;
ctx.drawImage(sparks[i].img, point.x - size / 2, point.y - size / 2, size, size);
}
}
}
function frame() {
if (frames > 100000) {
seedTimer = 0;
frames = 0;
}
frames++;
draw();
doLogic();
requestAnimationFrame(frame);
}
window.addEventListener("resize", () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
cx = canvas.width / 2;
cy = canvas.height / 2;
});
initVars();
frame();
window.onload = function () {
setInterval("toggleSound()", 100);
}
function toggleSound() {
var music = document.getElementById("myAudio");//获取ID
if (music.paused) { //判读是否播放
music.paused = false;
music.play(); //没有就播放
}
}
</script>
<script>
/*
author:Ynchen.
*/
var S = {
init: function () {
var action = window.location.href,
i = action.indexOf('?a=');
S.Drawing.init('.canvas');
document.body.classList.add('body--ready');
if (i !== -1) {
S.UI.simulate(decodeURI(action).substring(i + 3));
} else {
S.UI.simulate('|#countdown 3||新年快乐呀|2025|Ynchen祝你|天天开心！|岁岁欢愉！ ');
}
S.Drawing.loop(function () {
S.Shape.render();
});
}
};
S.Drawing = (function () {
var canvas,
context,
renderFn
requestFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
return {
init: function (el) {
canvas = document.querySelector(el);
context = canvas.getContext('2d');
this.adjustCanvas();
window.addEventListener('resize', function (e) {
S.Drawing.adjustCanvas();
});
},
loop: function (fn) {
renderFn = !renderFn ? fn : renderFn;
this.clearFrame();
renderFn();
requestFrame.call(window, this.loop.bind(this));
},
adjustCanvas: function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
},
clearFrame: function () {
context.clearRect(0, 0, canvas.width, canvas.height);
},
getArea: function () {
return { w: canvas.width, h: canvas.height };
},
drawCircle: function (p, c) {
context.fillStyle = c.render();
context.beginPath();
context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
}
}());
S.UI = (function () {
var canvas = document.querySelector('.canvas'),
interval,
isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
currentAction,
resizeTimer,
time,
maxShapeSize = 30,
firstAction = true,
sequence = [],
cmd = '#';
function formatTime(date) {
var h = date.getHours(),
m = date.getMinutes(),
m = m < 10 ? '0' + m : m;
return h + ':' + m;
}
function getValue(value) {
return value && value.split(' ')[1];
}
function getAction(value) {
value = value && value.split(' ')[0];
return value && value[0] === cmd && value.substring(1);
}
function timedAction(fn, delay, max, reverse) {
clearInterval(interval);
currentAction = reverse ? max : 1;
fn(currentAction);
if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
interval = setInterval(function () {
currentAction = reverse ? currentAction - 1 : currentAction + 1;
fn(currentAction);
if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
clearInterval(interval);
}
}, delay);
}
}
function reset(destroy) {
clearInterval(interval);
sequence = [];
time = null;
destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
}
function performAction(value) {
var action,
value,
current;
// overlay.classList.remove('overlay--visible');
sequence = typeof (value) === 'object' ? value : sequence.concat(value.split('|'));
// input.value = '';
// checkInputWidth();
timedAction(function (index) {
current = sequence.shift();
action = getAction(current);
value = getValue(current);
switch (action) {
case 'countdown':
value = parseInt(value) || 10;
value = value > 0 ? value : 10;
timedAction(function (index) {
if (index === 0) {
if (sequence.length === 0) {
S.Shape.switchShape(S.ShapeBuilder.letter(''));
} else {
performAction(sequence);
}
} else {
S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
}
}, 1000, value, true);
break;
case 'rectangle':
value = value && value.split('x');
value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
break;
case 'circle':
value = parseInt(value) || maxShapeSize;
value = Math.min(value, maxShapeSize);
S.Shape.switchShape(S.ShapeBuilder.circle(value));
break;
case 'time':
var t = formatTime(new Date());
if (sequence.length > 0) {
S.Shape.switchShape(S.ShapeBuilder.letter(t));
} else {
timedAction(function () {
t = formatTime(new Date());
if (t !== time) {
time = t;
S.Shape.switchShape(S.ShapeBuilder.letter(time));
}
}, 1000);
}
break;
default:
S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
}
}, 2000, sequence.length);
}
function checkInputWidth(e) {
if (input.value.length > 18) {
ui.classList.add('ui--wide');
} else {
ui.classList.remove('ui--wide');
}
if (firstAction && input.value.length > 0) {
ui.classList.add('ui--enter');
} else {
ui.classList.remove('ui--enter');
}
}
function bindEvents() {
document.body.addEventListener('keydown', function (e) {
input.focus();
if (e.keyCode === 13) {
firstAction = false;
reset();
performAction(input.value);
}
});
// input.addEventListener('input', checkInputWidth);
// input.addEventListener('change', checkInputWidth);
// input.addEventListener('focus', checkInputWidth);
// help.addEventListener('click', function (e) {
// overlay.classList.toggle('overlay--visible');
// overlay.classList.contains('overlay--visible') && reset(true);
// });
// commands.addEventListener('click', function (e) {
// var el,
// info,
// demo,
// tab,
// active,
// url;
//
// if (e.target.classList.contains('commands-item')) {
// el = e.target;
// } else {
// el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
// }
//
// info = el && el.querySelector('.commands-item-info');
// demo = el && info.getAttribute('data-demo');
// url = el && info.getAttribute('data-url');
//
// if (info) {
// overlay.classList.remove('overlay--visible');
//
// if (demo) {
// input.value = demo;
//
// if (isTouch) {
// reset();
// performAction(input.value);
// } else {
// input.focus();
// }
// } else if (url) {
// //window.location = url;
// }
// }
// });
canvas.addEventListener('click', function (e) {
overlay.classList.remove('overlay--visible');
});
}
function init() {
bindEvents();
// input.focus();
isTouch && document.body.classList.add('touch');
}
// Init
init();
return {
simulate: function (action) {
performAction(action);
}
}
}());
S.UI.Tabs = (function () {
var tabs = document.querySelector('.tabs'),
labels = document.querySelector('.tabs-labels'),
triggers = document.querySelectorAll('.tabs-label'),
panels = document.querySelectorAll('.tabs-panel');
function activate(i) {
triggers[i].classList.add('tabs-label--active');
panels[i].classList.add('tabs-panel--active');
}
function bindEvents() {
labels.addEventListener('click', function (e) {
var el = e.target,
index;
if (el.classList.contains('tabs-label')) {
for (var t = 0; t < triggers.length; t++) {
triggers[t].classList.remove('tabs-label--active');
panels[t].classList.remove('tabs-panel--active');
if (el === triggers[t]) {
index = t;
}
}
activate(index);
}
});
}
function init() {
activate(0);
bindEvents();
}
// Init
init();
}());
S.Point = function (args) {
this.x = args.x;
this.y = args.y;
this.z = args.z;
this.a = args.a;
this.h = args.h;
};
S.Color = function (r, g, b, a) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
};
S.Color.prototype = {
render: function () {
return 'rgba(' + this.r + ',' + + this.g + ',' + this.b + ',' + this.a + ')';
}
};
S.Dot = function (x, y) {
this.p = new S.Point({
x: x,
y: y,
z: 5,
a: 1,
h: 0
});
this.e = 0.07;
this.s = true;
this.c = new S.Color(255, 255, 255, this.p.a);
this.t = this.clone();
this.q = [];
};
S.Dot.prototype = {
clone: function () {
return new S.Point({
x: this.x,
y: this.y,
z: this.z,
a: this.a,
h: this.h
});
},
_draw: function () {
this.c.a = this.p.a;
S.Drawing.drawCircle(this.p, this.c);
},
_moveTowards: function (n) {
var details = this.distanceTo(n, true),
dx = details[0],
dy = details[1],
d = details[2],
e = this.e * d;
if (this.p.h === -1) {
this.p.x = n.x;
this.p.y = n.y;
return true;
}
if (d > 1) {
this.p.x -= ((dx / d) * e);
this.p.y -= ((dy / d) * e);
} else {
if (this.p.h > 0) {
this.p.h--;
} else {
return true;
}
}
return false;
},
_update: function () {
if (this._moveTowards(this.t)) {
var p = this.q.shift();
if (p) {
this.t.x = p.x || this.p.x;
this.t.y = p.y || this.p.y;
this.t.z = p.z || this.p.z;
this.t.a = p.a || this.p.a;
this.p.h = p.h || 0;
} else {
if (this.s) {
this.p.x -= Math.sin(Math.random() * 3.142);
this.p.y -= Math.sin(Math.random() * 3.142);
} else {
this.move(new S.Point({
x: this.p.x + (Math.random() * 50) - 25,
y: this.p.y + (Math.random() * 50) - 25,
}));
}
}
}
d = this.p.a - this.t.a;
this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
d = this.p.z - this.t.z;
this.p.z = Math.max(1, this.p.z - (d * 0.05));
},
distanceTo: function (n, details) {
var dx = this.p.x - n.x,
dy = this.p.y - n.y,
d = Math.sqrt(dx * dx + dy * dy);
return details ? [dx, dy, d] : d;
},
move: function (p, avoidStatic) {
if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
this.q.push(p);
}
},
render: function () {
this._update();
this._draw();
}
}
S.ShapeBuilder = (function () {
var gap = 13,
shapeCanvas = document.createElement('canvas'),
shapeContext = shapeCanvas.getContext('2d'),
fontSize = 500,
fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
function fit() {
shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
shapeContext.fillStyle = 'red';
shapeContext.textBaseline = 'middle';
shapeContext.textAlign = 'center';
}
function processCanvas() {
var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
dots = [],
pixels,
x = 0,
y = 0,
fx = shapeCanvas.width,
fy = shapeCanvas.height,
w = 0,
h = 0;
for (var p = 0; p < pixels.length; p += (4 * gap)) {
if (pixels[p + 3] > 0) {
dots.push(new S.Point({
x: x,
y: y
}));
w = x > w ? x : w;
h = y > h ? y : h;
fx = x < fx ? x : fx;
fy = y < fy ? y : fy;
}
x += gap;
if (x >= shapeCanvas.width) {
x = 0;
y += gap;
p += gap * 4 * shapeCanvas.width;
}
}
return { dots: dots, w: w + fx, h: h + fy };
}
function setFontSize(s) {
shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function init() {
fit();
window.addEventListener('resize', fit);
}
// Init
init();
return {
imageFile: function (url, callback) {
var image = new Image(),
a = S.Drawing.getArea();
image.onload = function () {
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
callback(processCanvas());
};
image.onerror = function () {
callback(S.ShapeBuilder.letter('What?'));
}
image.src = url;
},
circle: function (d) {
var r = Math.max(0, d) / 2;
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
shapeContext.beginPath();
shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
shapeContext.fill();
shapeContext.closePath();
return processCanvas();
},
letter: function (l) {
var s = 0;
setFontSize(fontSize);
s = Math.min(fontSize,
(shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
(shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
setFontSize(s);
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
return processCanvas();
},
rectangle: function (w, h) {
var dots = [],
width = gap * w,
height = gap * h;
for (var y = 0; y < height; y += gap) {
for (var x = 0; x < width; x += gap) {
dots.push(new S.Point({
x: x,
y: y,
}));
}
}
return { dots: dots, w: width, h: height };
}
};
}());
S.Shape = (function () {
var dots = [],
width = 0,
height = 0,
cx = 0,
cy = 0;
function compensate() {
var a = S.Drawing.getArea();
cx = a.w / 2 - width / 2;
cy = a.h / 2 - height / 2;
}
return {
shuffleIdle: function () {
var a = S.Drawing.getArea();
for (var d = 0; d < dots.length; d++) {
if (!dots[d].s) {
dots[d].move({
x: Math.random() * a.w,
y: Math.random() * a.h
});
}
}
},
switchShape: function (n, fast) {
var size,
a = S.Drawing.getArea();
width = n.w;
height = n.h;
compensate();
if (n.dots.length > dots.length) {
size = n.dots.length - dots.length;
for (var d = 1; d <= size; d++) {
dots.push(new S.Dot(a.w / 2, a.h / 2));
}
}
var d = 0,
i = 0;
while (n.dots.length > 0) {
i = Math.floor(Math.random() * n.dots.length);
dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
if (dots[d].s) {
dots[d].move(new S.Point({
z: Math.random() * 20 + 10,
a: Math.random(),
h: 18
}));
} else {
dots[d].move(new S.Point({
z: Math.random() * 5 + 5,
h: fast ? 18 : 30
}));
}
dots[d].s = true;
dots[d].move(new S.Point({
x: n.dots[i].x + cx,
y: n.dots[i].y + cy,
a: 1,
z: 5,
h: 0
}));
n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
d++;
}
for (var i = d; i < dots.length; i++) {
if (dots[i].s) {
dots[i].move(new S.Point({
z: Math.random() * 20 + 10,
a: Math.random(),
h: 20
}));
dots[i].s = false;
dots[i].e = 0.04;
dots[i].move(new S.Point({
x: Math.random() * a.w,
y: Math.random() * a.h,
a: 0.3, //.4
z: Math.random() * 4,
h: 0
}));
}
}
},
render: function () {
for (var d = 0; d < dots.length; d++) {
dots[d].render();
}
}
}
}());
S.init();
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5+Canvas漂亮的3D流星雨2025跨年特效</title>
<style>
html,
body {
margin: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background: #000000;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 canvas流星雨星星动画特效代码</title>
<script>
var context
var arr = new Array() //星星
var starCount = 800
var rains = new Array() // 流星
var rainCount = 40
//初始化画布及context
function init() {
//获取canvas
var stars = document.getElementById('stars')
windowWidth = window.innerWidth //当前的窗口的高度
stars.width = windowWidth
stars.height = window.innerHeight
//获取context 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
context = stars.getContext('2d')
}
//创建一个星星对象
var Star = function () {
this.x = windowWidth * Math.random() //横坐标
this.y = 5000 * Math.random() //纵坐标
this.text = '.' //文本
this.color = 'white' //颜色
//产生随机颜色
this.getColor = function () {
var _r = Math.random()
if (_r < 0.5) {
this.color = '#333' // 灰色
} else {
this.color = 'white'
}
}
//初始化
this.init = function () {
this.getColor()
}
//绘制
this.draw = function () {
context.fillStyle = this.color
context.fillText(this.text, this.x, this.y)
}
}
//页面加载的时候
window.onload = function () {
init()
//画星星
for (var i = 0; i < starCount; i++) {
var star = new Star()
star.init()
star.draw()
arr.push(star)
}
//画流星
for (var i = 0; i < rainCount; i++) {
var rain = new MeteorRain()
rain.init()
rain.draw()
rains.push(rain)
}
playStars() //绘制闪动的星星
playRains() //绘制流星
}
//星星闪起来
function playStars() {
for (var n = 0; n < starCount; n++) {
arr[n].getColor()
arr[n].draw()
}
setTimeout('playStars()', 10)
}
/*流星雨开始*/
var MeteorRain = function () {
this.x = -1
this.y = -1
this.length = -1 //长度
this.angle = 30 //倾斜角度
this.width = -1 //宽度
this.height = -1 //高度
this.speed = 1 //速度
this.offset_x = -1 //横轴移动偏移量
this.offset_y = -1 //纵轴移动偏移量
this.alpha = 1 //透明度
this.color1 = '' //流星的色彩
this.color2 = '' //流星的色彩
/****************初始化函数********************/
this.init = function () //初始化
{
this.getPos()
this.alpha = 1 //透明度
this.getRandomColor()
//最小长度，最大长度
var x = Math.random() * 80 + 150
this.length = Math.ceil(x)
this.angle = 30 //流星倾斜角
x = Math.random() + 0.5
this.speed = Math.ceil(x) //流星的速度
var cos = Math.cos((this.angle * 3.14) / 180)
var sin = Math.sin((this.angle * 3.14) / 180)
this.width = this.length * cos //流星所占宽度
this.height = this.length * sin //流星所占高度
this.offset_x = this.speed * cos
this.offset_y = this.speed * sin
}
/**************获取随机颜色函数*****************/
this.getRandomColor = function () {
var a = Math.ceil(255 - 240 * Math.random())
//中段颜色
this.color1 = 'rgba(' + a + ',' + a + ',' + a + ',1)'
//结束颜色
this.color2 = 'black'
}
/***************重新计算流星坐标的函数******************/
this.countPos = function () //
{
//往左下移动,x减少，y增加
this.x = this.x - this.offset_x
this.y = this.y + this.offset_y
}
/*****************获取随机坐标的函数*****************/
this.getPos = function () //
{
//横坐标200--1200
this.x = Math.random() * window.innerWidth //窗口高度
//纵坐标小于600
this.y = Math.random() * window.innerHeight //窗口宽度
}
/****绘制流星***************************/
this.draw = function () //绘制一个流星的函数
{
context.save()
context.beginPath()
context.lineWidth = 1 //宽度
context.globalAlpha = this.alpha //设置透明度
//创建横向渐变颜色,起点坐标至终点坐标
var line = context.createLinearGradient(
this.x,
this.y,
this.x + this.width,
this.y - this.height
)
//分段设置颜色
line.addColorStop(0, 'white')
line.addColorStop(0.3, this.color1)
line.addColorStop(0.6, this.color2)
context.strokeStyle = line
//起点
context.moveTo(this.x, this.y)
//终点
context.lineTo(this.x + this.width, this.y - this.height)
context.closePath()
context.stroke()
context.restore()
}
this.move = function () {
//清空流星像素
var x = this.x + this.width - this.offset_x
var y = this.y - this.height
context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5)
//重新计算位置，往左下移动
this.countPos()
//透明度增加
this.alpha -= 0.002
//重绘
this.draw()
}
}
//绘制流星
function playRains() {
for (var n = 0; n < rainCount; n++) {
var rain = rains[n]
rain.move() //移动
if (rain.y > window.innerHeight) {
//超出界限后重来
context.clearRect(
rain.x,
rain.y - rain.height,
rain.width,
rain.height
)
rains[n] = new MeteorRain()
rains[n].init()
}
}
setTimeout('playRains()', 2)
}
/*流星雨结束*/
</script>
<style type="text/css">
body {
background-color: rgb(0, 0, 0);
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="stars"></canvas>
</body>
</html>
</head>
<body> <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas> <canvas
style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas"></canvas> <audio id="myAudio" controls
autoplay style="display: none;">
<source
src="https://webfs.ali.kugou.com/202212311401/c12fd67b0106b68294c3eb354aec3786/part/0/1516896/KGTX/CLTX001/clip_488850641544fb4c6e14e6b8356d084f.mp3"
type="audio/mpeg">
</audio>
<div class="overlay">
<div class="tabs">
<div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span
class="tabs-label">Share</span></div>
<div class="tabs-panels">
<ul class="tabs-panel commands"> </ul>
</div>
</div>
</div>
<script> function initVars() { pi = Math.PI; ctx = canvas.getContext("2d"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; cx = canvas.width / 2; cy = canvas.height / 2; playerZ = -25; playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0; scale = 600; seedTimer = 0; seedInterval = 5, seedLife = 100; gravity = .02; seeds = new Array(); sparkPics = new Array(); s = "https://cantelope.org/NYE/"; for (i = 1; i <= 10; ++i) { sparkPic = new Image(); sparkPic.src = s + "spark" + i + ".png"; sparkPics.push(sparkPic); } sparks = new Array(); pow1 = new Audio(s + "pow1.ogg"); pow2 = new Audio(s + "pow2.ogg"); pow3 = new Audio(s + "pow3.ogg"); pow4 = new Audio(s + "pow4.ogg"); frames = 0; } function rasterizePoint(x, y, z) { var p, d; x -= playerX; y -= playerY; z -= playerZ; p = Math.atan2(x, z); d = Math.sqrt(x * x + z * z); x = Math.sin(p - yaw) * d; z = Math.cos(p - yaw) * d; p = Math.atan2(y, z); d = Math.sqrt(y * y + z * z); y = Math.sin(p - pitch) * d; z = Math.cos(p - pitch) * d; var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z, uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1); if (!uc) return { x: 0, y: 0, d: -1 }; var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc; var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc; if (!z) z = .000000001; if (ua > 0 && ua < 1 && ub > 0 && ub < 1) { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + y / z * scale, d: Math.sqrt(x * x + y * y + z * z) }; } else { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + y / z * scale, d: -1 }; } } function spawnSeed() {
seed = new Object(); seed.x = -50 + Math.random() * 100; seed.y = 25; seed.z = -50 + Math.random() * 100; seed.vx = .1 - Math.random() * .2; seed.vy = -1.5;//*(1+Math.random()/2); seed.vz = .1 - Math.random() * .2; seed.born = frames; seeds.push(seed); } function splode(x, y, z) { t = 5 + parseInt(Math.random() * 150); sparkV = 1 + Math.random() * 2.5; type = parseInt(Math.random() * 3); switch (type) { case 0: pic1 = parseInt(Math.random() * 10); break; case 1: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); break; case 2: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); do { pic3 = parseInt(Math.random() * 10); } while (pic3 == pic1 || pic3 == pic2); break; } for (m = 1; m < t; ++m) { spark = new Object(); spark.x = x; spark.y = y; spark.z = z; p1 = pi * 2 * Math.random(); p2 = pi * Math.random(); v = sparkV * (1 + Math.random() / 6) spark.vx = Math.sin(p1) * Math.sin(p2) * v; spark.vz = Math.cos(p1) * Math.sin(p2) * v; spark.vy = Math.cos(p2) * v; switch (type) { case 0: spark.img = sparkPics[pic1]; break; case 1: spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2]; break; case 2: switch (parseInt(Math.random() * 3)) { case 0: spark.img = sparkPics[pic1]; break; case 1: spark.img = sparkPics[pic2]; break; case 2: spark.img = sparkPics[pic3]; break; } break; } spark.radius = 25 + Math.random() * 50; spark.alpha = 1; spark.trail = new Array(); sparks.push(spark); } switch (parseInt(Math.random() * 4)) { case 0: pow = new Audio(s + "pow1.ogg"); break; case 1: pow = new Audio(s + "pow2.ogg"); break; case 2: pow = new Audio(s + "pow3.ogg"); break; case 3: pow = new Audio(s + "pow4.ogg"); break; } d = Math.sqrt((x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ)); /*pow.volume=1.5/(1+d/10)*/; pow.play(); } function doLogic() { if (seedTimer < frames) { seedTimer = frames + seedInterval * Math.random() * 10; spawnSeed(); } for (i = 0; i < seeds.length; ++i) { seeds[i].vy += gravity; seeds[i].x += seeds[i].vx; seeds[i].y += seeds[i].vy; seeds[i].z += seeds[i].vz; if (frames - seeds[i].born > seedLife) { splode(seeds[i].x, seeds[i].y, seeds[i].z); seeds.splice(i, 1); } } for (i = 0; i < sparks.length; ++i) { if (sparks[i].alpha > 0 && sparks[i].radius > 5) { sparks[i].alpha -= .01; sparks[i].radius /= 1.02; sparks[i].vy += gravity; point = new Object(); point.x = sparks[i].x; point.y = sparks[i].y; point.z = sparks[i].z; if (sparks[i].trail.length) { x = sparks[i].trail[sparks[i].trail.length - 1].x; y = sparks[i].trail[sparks[i].trail.length - 1].y; z = sparks[i].trail[sparks[i].trail.length - 1].z; d = ((point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z)); if (d > 9) { sparks[i].trail.push(point); } } else { sparks[i].trail.push(point); } if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1); sparks[i].x += sparks[i].vx; sparks[i].y += sparks[i].vy; sparks[i].z += sparks[i].vz; sparks[i].vx /= 1.075; sparks[i].vy /= 1.075; sparks[i].vz /= 1.075; } else { sparks.splice(i, 1); } } p = Math.atan2(playerX, playerZ); d = Math.sqrt(playerX * playerX + playerZ * playerZ); d += Math.sin(frames / 80) / 1.25; t = Math.sin(frames / 200) / 40; playerX = Math.sin(p + t) * d; playerZ = Math.cos(p + t) * d; yaw = pi + p + t; } function rgb(col) { var r = parseInt((.5 + Math.sin(col) * .5) * 16); var g = parseInt((.5 + Math.cos(col) * .5) * 16); var b = parseInt((.5 - Math.sin(col) * .5) * 16); return "#" + r.toString(16) + g.toString(16) + b.toString(16); } function draw() { ctx.clearRect(0, 0, cx * 2, cy * 2); ctx.fillStyle = "#ff8"; for (i = -100; i < 100; i += 3) { for (j = -100; j < 100; j += 4) { x = i; z = j; y = 25; point = rasterizePoint(x, y, z); if (point.d != -1) { size = 250 / (1 + point.d); d = Math.sqrt(x * x + z * z); a = 0.75 - Math.pow(d / 100, 6) * 0.75; if (a > 0) { ctx.globalAlpha = a; ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size); } } } } ctx.globalAlpha = 1; for (i = 0; i < seeds.length; ++i) { point = rasterizePoint(seeds[i].x, seeds[i].y, seeds[i].z); if (point.d != -1) { size = 200 / (1 + point.d); ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size); } } point1 = new Object(); for (i = 0; i < sparks.length; ++i) { point = rasterizePoint(sparks[i].x, sparks[i].y, sparks[i].z); if (point.d != -1) { size = sparks[i].radius * 200 / (1 + point.d); if (sparks[i].alpha < 0) sparks[i].alpha = 0; if (sparks[i].trail.length) { point1.x = point.x; point1.y = point.y; switch (sparks[i].img) { case sparkPics[0]: ctx.strokeStyle = "#f84"; break; case sparkPics[1]: ctx.strokeStyle = "#84f"; break; case sparkPics[2]: ctx.strokeStyle = "#8ff"; break; case sparkPics[3]: ctx.strokeStyle = "#fff"; break; case sparkPics[4]: ctx.strokeStyle = "#4f8"; break; case sparkPics[5]: ctx.strokeStyle = "#f44"; break; case sparkPics[6]: ctx.strokeStyle = "#f84"; break; case sparkPics[7]: ctx.strokeStyle = "#84f"; break; case sparkPics[8]: ctx.strokeStyle = "#fff"; break; case sparkPics[9]: ctx.strokeStyle = "#44f"; break; } for (j = sparks[i].trail.length - 1; j >= 0; --j) { point2 = rasterizePoint(sparks[i].trail[j].x, sparks[i].trail[j].y, sparks[i].trail[j].z); if (point2.d != -1) { ctx.globalAlpha = j / sparks[i].trail.length * sparks[i].alpha / 2; ctx.beginPath(); ctx.moveTo(point1.x, point1.y); ctx.lineWidth = 1 + sparks[i].radius * 10 / (sparks[i].trail.length - j) / (1 + point2.d); ctx.lineTo(point2.x, point2.y); ctx.stroke(); point1.x = point2.x; point1.y = point2.y; } } } ctx.globalAlpha = sparks[i].alpha; ctx.drawImage(sparks[i].img, point.x - size / 2, point.y - size / 2, size, size); } } } function frame() { if (frames > 100000) { seedTimer = 0; frames = 0; } frames++; draw(); doLogic(); requestAnimationFrame(frame); } window.addEventListener("resize", () => { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; cx = canvas.width / 2; cy = canvas.height / 2; }); initVars(); frame(); window.onload = function () { setInterval("toggleSound()", 100); } function toggleSound() { var music = document.getElementById("myAudio");//获取ID if (music.paused) { //判读是否播放 music.paused = false; music.play(); //没有就播放 } } </script>
<script> /* author:sakura */ var S = { init: function () { var action = window.location.href, i = action.indexOf('?a='); S.Drawing.init('.canvas'); document.body.classList.add('body--ready'); if (i !== -1) { S.UI.simulate(decodeURI(action).substring(i + 3)); } else { S.UI.simulate('|#countdown 3||新|年|快|乐|这是|送你的烟花呀|2025 HAPPY NEW YEAR'); } S.Drawing.loop(function () { S.Shape.render(); }); } }; S.Drawing = (function () { var canvas, context, renderFn requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; return { init: function (el) { canvas = document.querySelector(el); context = canvas.getContext('2d'); this.adjustCanvas(); window.addEventListener('resize', function (e) { S.Drawing.adjustCanvas(); }); }, loop: function (fn) { renderFn = !renderFn ? fn : renderFn; this.clearFrame(); renderFn(); requestFrame.call(window, this.loop.bind(this)); }, adjustCanvas: function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, clearFrame: function () { context.clearRect(0, 0, canvas.width, canvas.height); }, getArea: function () { return { w: canvas.width, h: canvas.height }; }, drawCircle: function (p, c) { context.fillStyle = c.render(); context.beginPath(); context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); context.closePath(); context.fill(); } } }()); S.UI = (function () { var canvas = document.querySelector('.canvas'), interval, isTouch = false,