Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #262167; } canvas { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05); }
JavaScript
const simplex = new SimplexNoise(Math.random()); const angleBetween = (vec1, vec2) => Math.atan2(vec2.y - vec1.y, vec2.x - vec1.x); const distanceBetween = (vec1, vec2) => Math.hypot(vec1.x - vec2.x, vec1.y - vec2.y); const TAU = Math.PI * 2; class Stage { constructor(canvas, width, height) { this.canvas = canvas; this.context = this.canvas.getContext('2d'); this.setSize(width, height); } clear() { this.context.clearRect(0, 0, this.width, this.height); } setSize(width, height) { this.width = width; this.height = height; this.center = { x: this.width * 0.5, y: this.height * 0.5, }; this.canvas.width = this.width; this.canvas.height = this.height; } getRandomPosition() { return { x: this.width * Math.random(), y: this.height * Math.random() }; } } class Element { constructor(position, radius) { this.positionCurrent = { x: position.x,y: position.y }; this.positionDefault = { x: position.x, y: position.y }; this.radius = radius; this.maxReach = 50; } update(focusPoint, distanceMax, reachForce) { const distance = distanceBetween(this.positionDefault, focusPoint); this.reachTo(distance, focusPoint, reachForce); this.scale(distance, distanceMax); } scale(distance, distanceMax) { this.radius = Math.max(0.5, (1 - (distance / distanceMax)) * 10); } reachTo(distance, focusPoint, reachForce) { const { positionDefault: pd } = this; const angle = angleBetween(pd, focusPoint); const distanceNorm = Math.min(distance / reachForce, 1); const length = 50 * distanceNorm; this.positionCurrent.x = pd.x + (Math.cos(angle) * length); this.positionCurrent.y = pd.y + (Math.sin(angle) * length); } drawStok(ctx, center) { ctx.beginPath(); ctx.strokeStyle = '#ccc'; ctx.lineWidth = 0.5; ctx.moveTo(this.positionCurrent.x, this.positionCurrent.y); ctx.lineTo(center.x, center.y) ctx.stroke(); ctx.closePath(); } drawElement(ctx, center) { ctx.save(); ctx.translate(this.positionCurrent.x, this.positionCurrent.y); ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, TAU, false); ctx.fill(); ctx.closePath(); ctx.restore(); } } class Scene { constructor(stage) { this.phase = 0; this.stage = stage; this.padding = 100; this.numOrbits = 10; this.radius = (stage.width - (this.padding * 2)) * 0.5; this.elements = []; this.rafId = null; this.automated = true; this.setFocusPoint(stage.center); } reset() { this.stage.clear(); this.generate(); } generate() { this.elements = []; const { numOrbits, stage: { center } } = this; const radiusStep = this.radius / numOrbits; for (let i = 0; i < numOrbits; i++) { const orbitRadius = radiusStep * (i + 1); const numCircles = Math.ceil(orbitRadius / 5); const angleStep = TAU / numCircles; for (let q = 0; q < numCircles; q++) { const x = center.x + (Math.cos(angleStep * q) * orbitRadius); const y = center.y + (Math.sin(angleStep * q) * orbitRadius); const radius = 5; this.elements.push(new Element({ x, y }, radius )); } } } setFocusPoint(point) { this.focusPoint = { x: point.x, y: point.y }; } run() { this.stage.clear(); const { context, center } = this.stage; if (this.automated) { const radius = (this.radius * 2) + ((this.radius * 0.5) * simplex.noise3D(this.phase, this.phase, this.phase)); const angle = TAU * simplex.noise3D(this.phase, this.phase, this.phase); this.focusPoint = { x: center.x + (Math.cos(angle) * radius), y: center.y + (Math.sin(angle) * radius), }; } this.elements.forEach((e) => { e.update(this.focusPoint, this.radius * 2, this.stage.width * 0.01); e.drawStok(context, center); }); this.elements.forEach((e) => { e.drawElement(context, center); }); this.phase += 0.001; this.rafId = requestAnimationFrame(() => this.run()); } } const stage = new Stage(document.querySelector('.js-canvas'), 700, 700); const scene = new Scene(stage); const onPointerMove = (e) => { const target = (e.touches && e.touches.length) ? e.touches[0] : e; scene.setFocusPoint({ x: target.clientX - e.target.offsetLeft, y: target.clientY - e.target.offsetTop, }); }; const onPointerOver = () => { scene.automated = false; }; const onPointerLeave = () => { scene.automated = true; }; stage.canvas.addEventListener('mousemove', onPointerMove); stage.canvas.addEventListener('touchmove', onPointerMove); stage.canvas.addEventListener('mouseenter', onPointerOver); stage.canvas.addEventListener('touchstart', onPointerOver); stage.canvas.addEventListener('mouseleave', onPointerLeave); stage.canvas.addEventListener('touchend', onPointerLeave); scene.generate(); scene.run();
粒子
时间
文字
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号