Canvas JS中使用setInterval实现组件循环移动失败求助

问题分析 #

1. 重复调用冲突：同时使用setInterval(component, 100)和requestAnimationFrame(component)，两个方法都会触发component函数执行，导致方块移动速度异常、甚至卡顿。requestAnimationFrame是浏览器原生的动画API，会和屏幕刷新率同步，无需额外用setInterval。
2. 循环逻辑缺失：当y >= 400时仅执行清屏，未重置y的初始值，导致方块消失后无法重新开始移动。
3. HTML结构不规范：<style>标签放在<!DOCTYPE html>之前，不符合HTML标准，需移至<head>标签内。

修复后的JavaScript代码 #

const canvas = document.getElementById("canvas")          
const context = canvas.getContext("2d")            
canvas.width = 400                 
canvas.height = 500                        
let y = 50

function component() {
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.fillStyle = 'blue'
    context.fillRect(10, y, 20, 20)    
    y += 1
    // 超出位置后重置y值，实现循环移动
    if(y >= 400) {
        y = 50
    }
    requestAnimationFrame(component)
}

// 仅需调用一次启动动画
component()

修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{
            background-color: rgb(37, 24, 42);
        }
    </style>
</head>
<body>
    <center>
        <canvas id="canvas"></canvas>
    </center>
    <script src="app.js"></script>
</body>
</html>

修复说明 #

• 移除setInterval，仅用requestAnimationFrame驱动动画，保证流畅度与屏幕刷新率同步。
• 修改边界判断逻辑，重置y为初始值，实现方块循环移动效果。
• 调整<style>标签位置至<head>内，符合HTML规范。

内容的提问来源于stack exchange，提问作者KurniawanRizky