Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { margin: 0; padding: 0; } html, body { overflow: hidden; } body { position: relative; background-color: #000; }
JavaScript
/* * File Name / colorfulLightning.js * Created Date / Oct 23, 2020 * Aurhor / Toshiya Marukubo */ /* Common Tool. */ class Tool { // random number. static randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // random color rgb. static randomColorRGB() { return ( "rgb(" + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ", " + this.randomNumber(0, 255) + ")" ); } // random color hsl. static randomColorHSL(hue, saturation, lightness) { return ( "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)" ); } // gradient color. static gradientColor(ctx, cr, cg, cb, ca, x, y, r) { const col = cr + "," + cg + "," + cb; const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, "rgba(" + col + ", " + (ca * 1) + ")"); g.addColorStop(0.5, "rgba(" + col + ", " + (ca * 0.5) + ")"); g.addColorStop(1, "rgba(" + col + ", " + (ca * 0) + ")"); return g; } // framerate static calcFPS() { const now = (+new Date()); const fps = 1000 / (now - lastTime); lastTime = now; return fps.toFixed(); } } /* When want to use angle. */ class Angle { constructor(angle) { this.a = angle; this.rad = this.a * Math.PI / 180; } incDec(num) { this.a += num; this.rad = this.a * Math.PI / 180; return this.rad; } } /* When want to use vector. */ class Vector2d { constructor(x, y) { this.vx = x; this.vy = y; } scale(scale) { this.vx *= scale; this.vy *= scale; } add(vec2) { this.vx += vec2.vx; this.vy += vec2.vy } sub(vec2) { this.vx -= vec2.vx; this.vy -= vec2.vy; } negate() { this.vx = -this.vx; this.vy = -this.vy; } length() { return Math.sqrt(this.vx * this.vx + this.vy * this.vy); } lengthSquared() { return this.vx * this.vx + this.vy * this.vy; } normalize() { let len = Math.sqrt(this.vx * this.vx + this.vy * this.vy); if (len) { this.vx /= len; this.vy /= len; } return len; } rotate(angle) { let vx = this.vx; let vy = this.vy; let cosVal = Math.cos(angle); let sinVal = Math.sin(angle); this.vx = vx * cosVal - vy * sinVal; this.vy = vx * sinVal + vy * cosVal; } toString() { return '(' + this.vx.toFixed(3) + ',' + this.vy.toFixed(3) + ')'; } } /* When want to use time. */ class Stopwatch { constructor(time) { this.startTime = 0; this.running = false; this.elapsed = undefined; } start() { this.startTime = +new Date(); this.elapsedTime = null; this.running = true; } stop() { this.elapsed = (+new Date()) - this.startTime; this.running = false; } getElepsedTime() { if (this.running) { return (+new Date()) - this.startTime; } else { return this.elapsed; } } isRunning() { return this.running; } reset() { this.elapsed = 0; } } /* When want to use controller. */ class Controller { constructor(id) { this.id = document.getElementById(id); } getVal() { return this.id.value; } } let canvas; let lastTime = 0; // to use framerate. const simplex = new SimplexNoise(); class Canvas { constructor(bool) { // create canvas. this.canvas = document.createElement("canvas"); // if on screen. if (bool === true) { this.canvas.style.position = 'fixed'; this.canvas.style.display = 'block'; this.canvas.style.top = '0'; this.canvas.style.left = '0'; document.getElementsByTagName("body")[0].appendChild(this.canvas); } this.ctx = this.canvas.getContext("2d"); this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; // mouse infomation. this.mouseX = null; this.mouseY = null; this.mouseZ = null; // shape this.shapeNum = 30; this.shapes = []; } // init, render, resize init() { for (let i = 0; i < this.shapeNum; i++) { const s = new Shape(this.ctx, this.width / 2, this.height / 2, i); this.shapes.push(s); } } render() { this.ctx.clearRect(0, 0, this.width, this.height); for (let i = 0; i < this.shapes.length; i++) { this.shapes[i].render(); } //this.drawFPS(); } drawFPS() { const ctx = this.ctx; ctx.save(); ctx.fillStyle = 'white'; ctx.font = '16px sans-selif'; ctx.textAlign = 'right'; ctx.textBaseline = 'bottom'; ctx.fillText(Tool.calcFPS() + ' FPS', this.width, this.height); ctx.restore(); } resize() { this.shapes = []; this.width = this.canvas.width = window.innerWidth; this.height = this.canvas.height = window.innerHeight; this.init(); } } /* Shape class. */ class Shape { constructor(ctx, x, y, i) { this.ctx = ctx; this.init(x, y, i); } init(x, y, i) { this.x = x; this.y = y; this.i = i; this.maxLength = 0; this.step = Tool.randomNumber(1, 10); this.a = Tool.randomNumber(0, 360); // rotate angle this.na = new Angle(0); // noise angle this.nas = Math.random(); // noise angle step this.l = Tool.randomNumber(10, 100); // life this.sl = this.l; // start life this.nd = 0; // noise dist this.ga = 1; this.ratio = 1; this.c = { r: Tool.randomNumber(0, 255), g: Tool.randomNumber(0, 255), b: Tool.randomNumber(0, 255) }; } draw() { const ctx = this.ctx; ctx.save(); ctx.globalCompositeOperation = 'lighter'; ctx.globalAlpha = this.ga; ctx.strokeStyle = 'rgb(' + this.c.r + ', ' + this.c.g + ', ' + this.c.b + ')'; ctx.shadowColor = 'white'; ctx.shadowBlur = 20; ctx.translate(this.x, this.y); ctx.scale(Math.tan(this.na.rad), Math.tan(this.na.rad)); ctx.rotate(this.a * Math.PI / 180); ctx.translate(-this.x, -this.y); ctx.beginPath(); for (let j = 0; j < 3; j++) { ctx.lineWidth = Tool.randomNumber(1, 20); for (let i = 0; i < this.maxLength; i += this.step) { let x = this.x; let y = this.y + i; const noise = simplex.noise3D(x / 10, y / 10, this.na.rad); //y = y + Math.cos(this.na.rad) * 10 * noise; x = Math.floor(x + this.nd * noise); if (i === 0) ctx.moveTo(x, y); ctx.lineTo(x, y); } ctx.stroke(); } ctx.restore(); } updateParams() { this.ratio = this.l / this.sl; this.ga = 1 * this.ratio; this.na.incDec(this.nas); this.maxLength += this.step / 2; this.nd += 0.5; this.l -= 1; if (this.l < 0) { this.init(this.x, this.y, this.i); } } render() { this.draw(); this.updateParams(); } } (function () { "use strict"; window.addEventListener("load", function () { canvas = new Canvas(true); canvas.init(); function render() { window.requestAnimationFrame(function () { canvas.render(); render(); }); } render(); // event window.addEventListener("resize", function() { canvas.resize(); }, false); }); })();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>七彩闪电-JavaScript-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号