Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body, html { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; touch-action: none; content-zooming: none; background: #000; } canvas { position: absolute; width: 100%; height: 100%; user-select: none; background: #000; cursor: pointer; }
JavaScript
"use strict"; const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const doit = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const cx = canvas.offsetWidth / 2; const cy = canvas.offsetHeight / 2; let ra = Math.random() * Math.PI * 2; let ga = ra + 0.4; let ba = ra + 0.8; const cs = 0.01 + Math.random() * 0.05; const numPoints = Math.round(10 + Math.random() * 50); const dist = 2 * Math.PI / (numPoints - 1); const noise = Math.random() * 100 + 70; const noise2 = Math.random() * 4 + 2; const points = []; for (let i = 0; i < numPoints; ++i) { points[i] = { x: Math.cos(i * dist) * 10, y: Math.sin(i * dist) * 10 }; } const mx = (i) => cx + (points[i].x + points[i + 1].x) / 2; const my = (i) => cy + (points[i].y + points[i + 1].y) / 2; const px = (i) => cx + points[i].x; const py = (i) => cy + points[i].y; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cx * 2, cy * 2); for (let x = 0; x < Math.sqrt(Math.min(cx, cy)) * 12; x++) { for (let i = 0; i < numPoints; ++i) { const p = points[i]; p.x *= 1.017; p.y *= 1.017; p.x += (Math.random() * noise2 - noise2 / 2); p.y += (Math.random() * noise2 - noise2 / 2); } ctx.beginPath(); ctx.strokeStyle = `rgb( ${Math.round(128 + Math.cos(ra += cs) * 127)}, ${Math.round(128 + Math.cos(ga += cs) * 127)}, ${Math.round(128 + Math.cos(ba += cs) * 127)} )`; ctx.moveTo(mx(0), my(0)); for (let i = 1; i < numPoints - 1; ++i) { ctx.quadraticCurveTo(px(i), py(i), mx(i), my(i)); } ctx.quadraticCurveTo(px(numPoints - 1), py(numPoints - 1), mx(0), my(0)); ctx.stroke(); } } doit(); ["click", "touchdown"].forEach(event => { document.addEventListener(event, e => doit(), false); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas背景-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号