Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
psychedelic rainbow spiral
css
* { overflow: hidden; margin: 0; width: 100%; height: 100%; } .c { background: black; }
JavaScript
var c = document.querySelector('.c') /* the canvas element */, ctx = c.getContext('2d') /* canvas context */, w /* canvas height */, h /* canvas height */, t = 0, max = Math.max, pow = Math.pow, sqrt = Math.sqrt, PI = Math.PI, sin = Math.sin, cos = Math.cos /* just me being lazy */, /* spiral vars */ n = 8 /* shades */, m = 4 /* shade repetitions */, p = 32 /* dots on each branch */, r, beta /* branch specific */, gamma /* dot specific */, x0, y0, x1, y1, hue, t_step = 1/60, requestID; /* FUNCTIONS */ var trimUnit = function(input_str, unit) { return parseInt(input_str.split(unit)[0], 10); }; var spiral = function() { ctx.clearRect(0, 0, w, h); for(var i = 0; i < n*m; i++) { beta = i*2*PI/(n*m); x0 = 0; /* Begin the path up here */ ctx.beginPath(); hue = i*360/n; ctx.translate(w/2, h/2); ctx.rotate(t/3); /* only need to set the fillstyle once up here now */ ctx.fillStyle = 'hsl(' + hue + ', 100%, 65%)'; for(var j = 0; j < p; j++) { gamma = j*2*PI/p; r = max(1, pow(2*(j*(p - j)), .43) - 10); x0 += 3.4*r; y0 = x0*sin(gamma + 2*t + x0/99)/5; /* change of coordinates */ x1 = x0*cos(beta) - y0*sin(beta); y1 = x0*sin(beta) + y0*cos(beta); /* move it to the position of the arc */ /* (remove this for a cool effect) */ ctx.moveTo(x1,y1); /* setup the arc path here */ ctx.arc(x1, y1, r, 0, 2*PI); } /* close the 1 path that now is a combination of all the arcs */ ctx.closePath(); /* fill the whole path only once now */ ctx.fill(); ctx.rotate(-t/3); ctx.translate(-w/2, -h/2); } t += t_step; requestID = requestAnimationFrame(spiral) }; var initCanvas = function() { var s /* canvas style set via CSS */ ; setTimeout(function() { s = getComputedStyle(c); w = c.width = trimUnit(s.width, 'px'); h = c.height = trimUnit(s.height, 'px'); /* if resizing, make sure to stop the previous animation * before starting a new one */ /* cancelAnimationFrame(requestID) should be * the requestID returned by requestAnimationFrame * thanks @FWeinb! */ if(requestID) { cancelAnimationFrame(requestID); } spiral(); }, 0); }; /* STEPS */ initCanvas(); /* fix looks on resize */ addEventListener('resize', initCanvas, false);
粒子
时间
文字
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号