OneBot: Leantime 改造版源码(BOM/Univer 表格/AI 接管/品牌替换等)
This commit is contained in:
12
public/assets/js/libs/confetti/info.txt
Normal file
12
public/assets/js/libs/confetti/info.txt
Normal file
@@ -0,0 +1,12 @@
|
||||
For more awesome web design code & scripts visit now:
|
||||
|
||||
https://www.codehim.com
|
||||
|
||||
I just need your one minute, please follow CodeHim.
|
||||
|
||||
Follow on Twitter: https://twitter.com/CodeHimOfficial
|
||||
Follow on Pinterest: https://www.pinterest.com/codehim/
|
||||
|
||||
|
||||
Regards
|
||||
Asif Mughal.
|
||||
169
public/assets/js/libs/confetti/js/confetti.js
Normal file
169
public/assets/js/libs/confetti/js/confetti.js
Normal file
@@ -0,0 +1,169 @@
|
||||
//-----------Var Inits--------------
|
||||
|
||||
var confetti = (function () {
|
||||
|
||||
let canvas = '';
|
||||
let ctx = '';
|
||||
let cx = '';
|
||||
let cy = '';
|
||||
|
||||
let confetti = [];
|
||||
const confettiCount = 50;
|
||||
const gravity = 1.2;
|
||||
const terminalVelocity = 5;
|
||||
const drag = 0.075;
|
||||
const colors = [
|
||||
{front: 'red', back: 'darkred'},
|
||||
{front: 'green', back: 'darkgreen'},
|
||||
{front: 'blue', back: 'darkblue'},
|
||||
{front: 'yellow', back: 'darkyellow'},
|
||||
{front: 'orange', back: 'darkorange'},
|
||||
{front: 'pink', back: 'darkpink'},
|
||||
{front: 'purple', back: 'darkpurple'},
|
||||
{front: 'turquoise', back: 'darkturquoise'}];
|
||||
|
||||
var start = function() {
|
||||
|
||||
canvas = document.createElement('canvas');
|
||||
|
||||
canvas.id = "confetti";
|
||||
canvas.style.zIndex = 10000;
|
||||
canvas.style.position = "fixed";
|
||||
canvas.style.top = 0;
|
||||
canvas.style.left = 0;
|
||||
|
||||
|
||||
var body = document.getElementsByTagName("body")[0];
|
||||
body.appendChild(canvas);
|
||||
|
||||
canvas = document.getElementById("confetti");
|
||||
|
||||
ctx = canvas.getContext("2d");
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
cx = ctx.canvas.width / 2;
|
||||
cy = ctx.canvas.height / 2;
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
resizeCanvas();
|
||||
});
|
||||
|
||||
|
||||
initConfetti();
|
||||
render();
|
||||
|
||||
|
||||
};
|
||||
|
||||
//-----------Functions--------------
|
||||
var resizeCanvas = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
cx = ctx.canvas.width / 2;
|
||||
cy = ctx.canvas.height / 2;
|
||||
};
|
||||
|
||||
let randomRange = (min, max) => Math.random() * (max - min) + min;
|
||||
|
||||
let initConfetti = () => {
|
||||
|
||||
for (let i = 0; i < confettiCount; i++) {
|
||||
confetti.push({
|
||||
color: colors[Math.floor(randomRange(0, colors.length))],
|
||||
dimensions: {
|
||||
x: randomRange(10, 20),
|
||||
y: randomRange(10, 30) },
|
||||
|
||||
position: {
|
||||
x: randomRange(0, canvas.width),
|
||||
y: canvas.height - 1 },
|
||||
|
||||
rotation: randomRange(0, 2 * Math.PI),
|
||||
scale: {
|
||||
x: 1,
|
||||
y: 1 },
|
||||
|
||||
velocity: {
|
||||
x: randomRange(-25, 25),
|
||||
y: randomRange(0, -50) }
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
//---------Render-----------
|
||||
let render = () => {
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
confetti.forEach((confetto, index) => {
|
||||
let width = confetto.dimensions.x * confetto.scale.x;
|
||||
let height = confetto.dimensions.y * confetto.scale.y;
|
||||
|
||||
// Move canvas to position and rotate
|
||||
ctx.translate(confetto.position.x, confetto.position.y);
|
||||
ctx.rotate(confetto.rotation);
|
||||
|
||||
// Apply forces to velocity
|
||||
confetto.velocity.x -= confetto.velocity.x * drag;
|
||||
confetto.velocity.y = Math.min(confetto.velocity.y + gravity, terminalVelocity);
|
||||
confetto.velocity.x += Math.random() > 0.5 ? Math.random() : -Math.random();
|
||||
|
||||
// Set position
|
||||
confetto.position.x += confetto.velocity.x;
|
||||
confetto.position.y += confetto.velocity.y;
|
||||
|
||||
// Delete confetti when out of frame
|
||||
if (confetto.position.y >= canvas.height) confetti.splice(index, 1);
|
||||
|
||||
// Loop confetto x position
|
||||
if (confetto.position.x > canvas.width) confetto.position.x = 0;
|
||||
if (confetto.position.x < 0) confetto.position.x = canvas.width;
|
||||
|
||||
// Spin confetto by scaling y
|
||||
confetto.scale.y = Math.cos(confetto.position.y * 0.1);
|
||||
ctx.fillStyle = confetto.scale.y > 0 ? confetto.color.front : confetto.color.back;
|
||||
|
||||
// Draw confetto
|
||||
ctx.fillRect(-width / 2, -height / 2, width, height);
|
||||
|
||||
// Reset transform matrix
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
});
|
||||
|
||||
// Fire off another round of confetti
|
||||
if (confetti.length <= 1) {
|
||||
//initConfetti();
|
||||
destroy();
|
||||
return;
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(render);
|
||||
|
||||
};
|
||||
|
||||
//---------Execution--------
|
||||
//initConfetti();
|
||||
//render();
|
||||
|
||||
//----------Resize----------
|
||||
|
||||
let destroy = function () {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
canvas.remove();
|
||||
window.cancelAnimationFrame(render);
|
||||
|
||||
confetti = [];
|
||||
};
|
||||
|
||||
// Make public what you want to have public, everything else is private
|
||||
return {
|
||||
start:start,
|
||||
initConfetti:initConfetti,
|
||||
resizeCanvas:resizeCanvas,
|
||||
render:render
|
||||
};
|
||||
})();
|
||||
|
||||
//confetti.start();
|
||||
Reference in New Issue
Block a user