canvas指纹识别进度动画效果代码
代码语言:html
所属分类:进度条
代码描述:canvas指纹识别进度动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; overflow: hidden; } .container { display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; background: #131418; } canvas { background: #001b30; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <canvas id="canvas"> </canvas> </div> <!-- partial --> <script> const { sin, PI } = Math; const fullCircle = 2 * PI; const canvas = document.getElementById("canvas"); const range = x => Array(x).fill(0).map((_, index) => index) const norm = (val, min, max)=>(val - min) / (max - min) const lerp = (nrm, min, max)=>(max - min) * nrm + min const lerpMap = (val, sMin, sMax, dMin, dMax)=>lerp(norm(val, sMin, sMax), dMin, dMax) const w = 400; const h = 250; canvas.width = 2 * w; canvas.height = 2 * h; const ctx = canvas.getContext("2d"); ctx.translate(w, h); const rect = ({ color, x, y, w, h }) => { ctx.beginPath(); ctx.fillStyle = color; ctx.fillRect(x, y, w, h); }; function clear() { rect({ color: "#001b30", x: -w, y: -h, w: 2 * w, h: 2 * h }); } const line = ({ x1, y1, x2, y2 }) => { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineWidth = 4; ctx.strokeStyle = "#00ffff"; ctx.stroke(); ctx.closePath(); }; const flashLight = (y, frameWidth) => { ctx.save(); const lightLength = frameWidth * 0.9; const hx = 8; ctx.beginPath(); ctx.moveTo(-lightLength, y); ctx.quadraticCurveTo(0, y - hx, lightLength, y); ctx.quadraticCurveTo(0, y + hx, -lightLength, y); ctx.fillStyle = "#00faff"; ctx.shadowColor = "#00faff"; ctx.shadowBlur = 20; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.fill(); ctx.closePath(); ctx.restore(); }; const frameWidth = 100; const frameHeight = 120; const frameLength = 30; let i = -50; let multiplier = -1; const update = () => { clear(); line({ x1: frameWidth, y1: frameHeight, x2: frameWidth - frameLength, y2: frameHeight }); line({ x1: frameWidth, y1:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0