Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; background-color: #000; } canvas { width: 100%; height: 100%; }
JavaScript
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var pi = Math.PI, tau = 2 * Math.PI; var cv = document.createElement('canvas'), ctx = cv.getContext('2d'); cv.width = innerWidth * devicePixelRatio; cv.height = innerHeight * devicePixelRatio; ctx.translate(cv.width / 2, cv.height / 2); ctx.scale(devicePixelRatio, devicePixelRatio); document.body.appendChild(cv); var Ring = function () { function Ring(r, d, s) { _classCallCheck(this, Ring); // tau * r * (tau / d) / tau var arc_l = tau * r / d; while (arc_l > s) { // d *= 2 // arc_l /= 2 d += 2; arc_l = tau * r / d; } this.r = r; this.d = d; this.a = 0; this.v = r / 5000; this.t = r; this.s = 2; // this.v = (1 - 2 * Math.random()) / 500 // console.log(this.r, this.d) } _createClass(Ring, [{ key: 'draw', value: function draw(ctx) { ctx.fillStyle = '#fff'; for (var i = 0; i < this.d; i++) { var a = tau * i / this.d + this.a, x = this.r * Math.cos(a) - this.s / 2, y = this.r * Math.sin(a) - this.s / 2; ctx.fillRect(x, y, this.s, this.s); } } }, { key: 'update', value: function update() { this.t--; this.s = 2 + Math.cos(this.t / 40); this.a += this.v; } }]); return Ring; }(); var rings = []; var r = 0; for (var i = 0; i < 100; i++) { rings.push(new Ring(r + i * 8.1, 3, 17)); } function animate() { ctx.clearRect(-cv.width / 2, -cv.height / 2, cv.width, cv.height); var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = rings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var ring = _step.value; ring.draw(ctx); ring.update(); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } requestAnimationFrame(animate); } animate();
粒子
时间
文字
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号