<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>rollBagua</title> </head> <body> <canvas width=600 height=400 style="border:1px solid"></canvas> <button name="stop">暂停</button> <button name="jump">跳</button> <script> const canvas = document.querySelector("canvas"); const pen = canvas.getContext("2d"); const pi = Math.PI; const w = canvas.offsetWidth; const h = canvas.offsetHeight; function rota(r) { pen.save(); pen.beginPath(); pen.moveTo(0, -r) pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi); pen.arc(0, r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi); pen.arc(0, -r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi, true); pen.fill(); pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi, true); pen.stroke(); pen.beginPath(); pen.arc(0, -r / 2, r / 6, 0, 2 * pi); pen.fill(); pen.beginPath(); pen.arc(0, r / 2, r / 6, 0, 2 * pi); pen.fillStyle = "#fff"; pen.fill(); pen.stroke(); pen.beginPath(); pen.restore(); } const r = 50;//球的半径 let ang = 0,//当前的旋转角度 vAng = pi / 30;//旋转的速度 let x = r + 1,//球的x坐标 xv = 2;//球x轴方向的速度 let y = 200,//球y轴上的坐标 yv = 5,//球y轴方向上的速度 ay = 0.1;//球受到的向下加速度 let isStop = false;//是否暂停标记 let isJump = false;//是否跳跃标记 function anim() { pen.clearRect(0, 0, w, h); pen.save(); if (x >= w - r || x <= r) { xv = -xv; vAng = -vAng; } if (isJump) { y -= (yv -= ay); if(y>=200){ isJump = false; y = 200; yv = 5; } } pen.translate(x += xv, y); pen.rotate(ang += vAng); rota(r); pen.restore(); pen.moveTo(0, 200 + r); pen.lineTo(w, 200 + r) pen.stroke(); if (isStop) { return; } requestAnimationFrame(() => anim()); } anim(); document.addEventListener("click", function (e) { let event = e || window.event; if (event.target.name === "stop") { if (isStop === false) { isStop = true; event.target.innerHTML = "继续"; } else { isStop = false; event.target.innerHTML = "暂停"; anim(); } } else if (event.target.name === "jump") { if (isJump === false) { isJump = true; } } }) </script> </body> </html>