<canvas class="title-cavans" :id="title"></canvas>
function getImg() { const canvas = document.getElementById(props.title) const ctx = canvas.getContext("2d") const frames = [] for (let i = 0; i <= 39; i++) { const img = new Image() i = i <= 9 ? "0" + i : i img.src = `/imgs/cavans/合成 1_000${i}.png` frames.push(img) } let currentFrame = 0 // function drawFrame() { // ctx.clearRect(0, 0, canvas.width, canvas.height) // ctx.drawImage(frames[currentFrame], 0, 0, canvas.width, canvas.height) // currentFrame = (currentFrame + 1) % frames.length // } // frames[0].onload = setInterval(drawFrame, 1000 / 25) // 自定义帧率 const frameRate = 25 // 目标帧率 const frameTime = 1000 / frameRate // 每帧的时间间隔（毫秒） let lastTime = 0 // 上一帧的时间戳 // 动画函数 function animate(currentTime) { // 计算自上一帧以来经过的时间 const deltaTime = currentTime - lastTime // 如果未达到目标帧率的时间间隔，则直接请求下一帧 if (deltaTime < frameTime) { requestAnimationFrame(animate) return } // 更新上一帧的时间戳 lastTime = currentTime ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(frames[currentFrame], 0, 0, canvas.width, canvas.height) currentFrame = (currentFrame + 1) % frames.length // 请求下一帧 requestAnimationFrame(animate) } // 开始动画 frames[0].onload = () => { requestAnimationFrame(animate) }}
