html实现圈内特效

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>body {background: #000;overflow: hidden;
}canvas {width: 100%;height: 100%;position: absolute;left: 0;top: 0;
}canvas.interactive {cursor: none;
}</style></HEAD><BODY><canvas id="canvas"></canvas><script>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 Canvas = function () {function Canvas(element, ctx, w, h) {_classCallCheck(this, Canvas);this.element = element;this.ctx = ctx;this.width = w;this.height = h;this.interactive = false;this.playing = true;this.point = {value: 150,speed: 0.25,limit: 70,floor: 10,up: true,animating: false};this.multiplier = {value: 1,speed: 0.005,limit: 20,floor: 1,up: true,animating: true};this.center = {x: w / 2,y: h / 2,targetX: w / 2,targetY: h / 2,easing: 0.02};this.radius = {val: h / 2.2,targetVal: h / 2.2,easing: 0.02};document.body.addEventListener('click', this.click.bind(this));document.body.addEventListener('mousemove', this.move.bind(this));document.body.addEventListener('keyup', this.keyup.bind(this));this.hue = 160;}_createClass(Canvas, [{key: 'click',value: function click(e) {this.interactive = !this.interactive;if (!this.interactive) {this.center.targetX = this.width / 2;this.center.targetY = this.height / 2;this.radius.targetVal = this.height / 2.2;this.element.classList.remove('interactive');} else {this.element.classList.add('interactive');}}}, {key: 'move',value: function move(e) {if (!this.interactive) {return;}var h3 = this.height / 3;this.center.targetX = e.pageX;this.center.targetY = Math.max(e.pageY, h3);this.radius.targetVal = h3 + e.pageY * 0.8;}}, {key: 'keyup',value: function keyup(e) {if (e.which != 32) {return;}this.playing = !this.playing;if (this.playing && this.drawLoop) {this.drawLoop();}}}, {key: 'update',value: function update() {this.clear();this.animate(this.point);this.animate(this.multiplier);this.ease(this.center);this.ease(this.radius);this.hue += 0.3;var h = this.hue % 360;this.ctx.fillStyle = 'hsl(' + h + ',70%,20%)';this.ctx.strokeStyle = 'hsla(' + h + ',80%,60%,0.2)';this.ctx.globalCompositeOperation = 'lighter';}}, {key: 'clear',value: function clear() {this.ctx.globalCompositeOperation = 'source-over';this.ctx.fillStyle = 'rgba(0,0,0,0.1)';this.ctx.rect(0, 0, this.width, this.height);this.ctx.fill();}}, {key: 'draw',value: function draw() {var radius = this.radius.val;var w2 = this.center.x,h2 = this.center.y;this.ctx.beginPath();this.ctx.shadowBlur = 0;this.ctx.shadowColor = 'black';var points = this.point.value;var multiplier = this.multiplier.value;for (var p = 0; p < points; p++) {var t = p / points * Math.PI * 2;var t2 = p * multiplier / points * Math.PI * 2;var x = radius * Math.cos(t) + w2;var y = radius * Math.sin(t) + h2;var x2 = radius * Math.cos(t2) + w2;var y2 = radius * Math.sin(t2) + h2;this.ctx.moveTo(x, y);this.ctx.lineTo(x2, y2);}this.ctx.arc(w2, h2, radius, 0, 2 * Math.PI);this.ctx.stroke();this.ctx.closePath();}}, {key: 'animate',value: function animate(object) {if (!object.animating) {return;}if (object.up) {object.value += object.speed;} else {object.value -= object.speed;}if (object.value > object.limit) {object.up = false;} else if (object.value < object.floor) {object.up = true;}}}, {key: 'ease',value: function ease(object) {if (object.val) {var dv = object.targetVal - object.val;object.val += dv * object.easing;return;}var dx = object.targetX - object.x;var dy = object.targetY - object.y;object.x += dx * object.easing;object.y += dy * object.easing;}}, {key: 'random',value: function random(from, to) {return from + Math.rand() * (to - from);}}, {key: 'resize',value: function resize(w, h) {this.width = w;this.height = h;this.center.targetX = w / 2;this.center.targetY = h / 2;this.radius.targetVal = h / 2.2;}}]);return Canvas;
}();(function (_) {var canvasElement = document.getElementById('canvas'),ctx = canvasElement.getContext('2d');var w = canvasElement.width = window.innerWidth,h = canvasElement.height = window.innerHeight,density = 1;var canvas = new Canvas(canvasElement, ctx, w, h);function setup() {window.addEventListener('resize', resize);density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;canvasElement.width = w * density;canvasElement.height = h * density;canvas.width = w;canvas.height = h;canvas.drawLoop = draw;ctx.scale(density, density);draw();}function draw() {canvas.update();canvas.draw();if (canvas.playing) {window.requestAnimationFrame(draw);}}function resize() {w = canvasElement.width = window.innerWidth;h = canvasElement.height = window.innerHeight;canvasElement.width = w * density;canvasElement.height = h * density;canvas.resize(w, h);ctx.scale(density, density);}setup();
})();</script></BODY>
</HTML>

实现结果：

html实现圈内特效相关推荐

有哪些 AI 行业圈内人才能看懂的笑话？
来源 | 知乎编辑 | 机器学习初学者找到几个圈内的笑话,满足以下几点要求中的至少一条: 1.与科研.学术相关 2.需依托一定学科知识或背景 3.发生于大学生活或工作期间有趣的事情 4.在娱乐吐槽 ...
圈内著名ts_央视为电竞发声：AG和estar当选著名战队，梦泪，猫神被官方肯定
王者荣耀世界冠军杯决赛马上就要开打了,对于成都AG超玩会来说,他们的比赛已经提前结束了,半决赛负于TS,成绩也停留在了四强,estarpro出局的时间更早,并没有达到大家的期待.不过对于这两支俱乐部的 ...
区块链行业如何摆脱“圈内自嗨”，真正进入大众市场？
硅谷Live / 实地探访 / 热点探秘 / 深度探讨区块链行业在经历过年初的烈火烹油鲜花着锦之盛后,已经进入了寒潮期,绝大多数项目估值大幅度下跌. 图片来自网络,版权属于原作者我们认为:区块链遇 ...
互联网圈内的域名大战
拥有1亿元人民币,我们可以买下一栋超级豪宅,一件绝世珍品,甚至是一家公司.360为如何花这笔钱提供了新思路:他们以1700万美元的天价,从沃达丰手中拿下了梦寐以求的域名360.com. 为得到这颗皇冠 ...
BTC是圈外人（机构）的盛宴，DeFi则是圈内人的狂欢
[要闻拾遗] 恭请看官阅览三圈(链矿币)要闻先 1.美国证券交易委员会(SEC)专员."加密妈妈"Hester Peirce在推特透露,加密货币支持者Elad Roisman被任命 ...
简述电信运营商圈内的三大业务领域-B-M-O
运营商指中国电信.移动.联通,主要通过服务公众个人.政企组织来进行相关的经营活动: 对我们大众客户来说,最简单的就是你办了运营商的移动电话.宽带卡,每个月收取相关的费用:也就是运营商从事公众客户的主要 ...
信息安全的江湖只有圈内人玩的转
本文首发于微信公众号:i黑马.文章内容属作者个人观点,不代表和讯网立场.投资者据此操作,风险请自担. 张矩,峰瑞资本董事.早期暨成长期项目负责人,拥有超过 20 年的高科技领域行业经验,对中美两国的互 ...
安全创业者修炼手册：信息安全的江湖，是属于圈内人的
雷锋网按:作者张矩,峰瑞资本董事,负责过 Google 和 YouTube数据中心的构建与运维,是 Google 中国创始团队成员和首位运维人员,参与研发和服务环境建设,也曾任 Joyent 中国区首 ...
有哪些AI行业圈内人才能看懂的笑话？
找到几个圈内的笑话,满足以下几点要求中的至少一条: 1.与科研.学术相关 2.需依托一定学科知识或背景 3.发生于大学生活或工作期间有趣的事情 4.在娱乐吐槽之时,也可以带来一点点科普性的知识主要来 ...

html实现圈内特效

实现代码：

实现结果：

html实现圈内特效相关推荐

最新文章

热门文章