如何利用canvas模仿百度贴吧客户端loading小球？_H5之家

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { height: 100%; } canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') canvas.width = 500 canvas.height = 500 var size = canvas.width / 4 // 圆的大小 var cx = canvas.width / 2 // 圆中心点 x 坐标 var cy = canvas.height / 2 // 圆中心点 y 坐标 var waveSize = size / 6 // 波浪大小 var x = 0 // 波浪位置偏移大小 function circle() { ctx.beginPath() ctx.arc(cx, cy, size / 2, 0, 2 * Math.PI) } function curve() { ctx.beginPath() ctx.moveTo(cx - size + x + size / 2, cy) ctx.quadraticCurveTo(cx - size + size / 4 + x + size / 2, cy - waveSize, cx - size + size / 2 + x + size / 2, cy) ctx.quadraticCurveTo(cx - size + size * 3 / 4 + x + size / 2, cy + waveSize, cx - size + size + x + size / 2, cy) ctx.quadraticCurveTo(cx + size / 4 + x + size / 2, cy - waveSize, cx + size / 2 + x + size / 2, cy) ctx.quadraticCurveTo(cx + size * 3 / 4 + x + size / 2, cy + waveSize, cx + size + x + size / 2, cy) ctx.lineTo(cx + size + x + size / 2, canvas.height) ctx.lineTo(cx - size + x + size / 2, canvas.height) ctx.lineTo(cx - size + x + size / 2, cy) ctx.closePath() } function text(fillStyle) { var fontSize = size / 250 * 120 ctx.font = 'bold ' + fontSize + 'px Arial' ctx.textAlign = 'center' ctx.fillStyle = fillStyle ctx.fillText('贴', cx, cy + fontSize * 0.3) } function loop(){ ctx.clearRect(0, 0, canvas.width, canvas.height) x -= 1.5 x = x % size ctx.save() circle() ctx.clip() text('#29a3fe') ctx.fillStyle = '#29a3fe' curve() ctx.fill() curve() ctx.clip() text('#fff') ctx.restore() requestAnimationFrame(loop) } loop() </script> </body> </html>