Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow:hidden; } canvas { position: absolute; width: 100%; height: 100%; background: #fff; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(196,196,196,1) 100%); }
JavaScript
class Line { constructor(x, y, a, n, w) { this.x = x; this.y = y; this.w = w; this.n = n; this.ang = a; this.angVel = 0; } anim() { this.x += 3 * Math.cos(this.ang); this.y += 3 * Math.sin(this.ang); this.angVel += 0.2 * (Math.random() - Math.random()); this.angVel *= 0.7; this.ang += this.angVel; let dx = this.x - size * 0.5; let dy = this.y - size * 0.5; this.x -= dx / (size * 0.25); this.y -= dy / (size * 0.25); if (this.w > 1) { ict.beginPath(); ict.fillStyle = "#fff"; ict.arc(this.x, this.y, this.w + 0.5, 0, 2 * Math.PI); ict.fill(); } ict.beginPath(); ict.fillStyle = "#000"; ict.arc(this.x, this.y, this.w, 0, 2 * Math.PI); ict.fill(); if (this.n > 0) { this.n--; if (this.n <= 1) { lines.delete(this); } } } } const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); const width = canvas.width = canvas.offsetWidth * 1; const height = canvas.height = canvas.offsetHeight * 1; const calc = document.createElement('canvas'); const ict = calc.getContext('2d'); const size = 2 * Math.max(width, height); calc.width = size; calc.height = size; ict.lineCap = "round"; let line = new Line(size / 2, size / 2, Math.random() * 2 * Math.PI, -1, 14); const lines = new Set(); const pos = []; for (let i = 0; i < 16; i++) pos.push([0,0]); function run() { requestAnimationFrame(run); ctx.clearRect(0, 0, width, height); line.anim(); for (let l of lines) l.anim(); const r = Math.random() > 0.99; const len = r ? 500 : 10 + Math.random() * 400; const wid = r ? 5 : 0.5; lines.add(new Line(line.x, line.y, line.ang, len, wid)); const [x, y] = pos.shift(); pos.push([line.x, line.y]); ctx.drawImage(calc, width * 0.5 - x, height * 0.5 - y); } run();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无处可去-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号