canvas渐变圈圈放大动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas渐变圈圈放大动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { position: relative; margin: 0; min-height: 100vh; overflow: hidden; background: repeating-radial-gradient( circle at center, #444 0 10%, #111 10% 20% ); touch-action: none; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; } canvas { width: 100%; height: auto; object-fit: contain; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = window.canvas; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio; let diag = Math.hypot(canvas.width, canvas.height); function resize() { const { innerWidth: width, innerHeight: height } = window; canvas.width = width * dpr; canvas.height = height * dpr; diag = Math.hypot(width * dpr, height * dpr); } function* createHues() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0