gsap实现三角形圆动画变化效果
代码语言:html
所属分类:动画
代码描述:gsap实现三角形圆动画变化效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; } body { width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; } canvas { border-radius: 50%; } </style> </head> <body translate="no"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script> <script> const size = 500; const mid = { x: size * 0.5, y: size * 0.5 }; const tau = Math.PI * 2; const ctxs = new Array(3).fill().map((_, i) => { const c = document.createElement('canvas'); c.width = size; c.height = size; return c.getContext('2d'); }); const [ctx, ctx2, ctx3] = ctxs; document.body.append(ctx3.canvas); const settings = { innerBackgroudColor: 'rgba(0, 0, 0, 1)', innerRadius: size * 0.2, innerPoints: 12, innerLineColor: 'rgba(255, 255, 255, 1)', outerBackgroundColor: 'rgba(255, 255, 255, 1)', outerRadius: size * 0.45, outerPoints: 8, outerLineColor: 'rgba(0, 0, 0, 1)', outerSpread: tau, maskOuterRadius: 0, maskInnerRadius: 0, }; ctx.canvas.width = size; ctx.canvas.height = size; const clear = () => { ctxs.forEach(c => c.clearRect(0, 0, c.canvas.width, c.canvas.height)); }; const background = () => { ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) }; const drawInner = (points, color = '#000') => { ctx.save(); ctx.translate(mid.x, mid.y); ctx.strokeStyle = settings.innerBackgroudColor; ctx.fillStyle = settings.innerBackgroudColor; ctx.beginPath(); ctx.arc(0, 0, settings.innerRadius, 0, tau, false); ctx.closePath(); ctx.fill(); points.forEach((p) => { ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, tau, false); ctx.closePath(); ctx.fill(); }); ctx.restore(); }; const drawOuter = (dest, innerPoints, lineColor = '#000') => { for (let i = 0; i < settings.outerPoints; i++) { const a = ((settings.outerSpread / settings.outerPoints) * i); const from = { x: Math.cos(a) * settings.outerRadius, y: Math.sin(a) * settings.outerRadius, }; connectDots(dest, from, innerPoints, lineColor); } }; const connectDots = (dest, from, points, lineColor) => { dest.save(); dest.translate(mid.x, mid.y); dest.strokeStyle = lineColor; dest.lineWidth = 1; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0