Canvas中Context.clearRect失效求助：移动图片调用后图片消失

阿华AIGC实验室

2026-5-21

解决Canvas中clearRect()导致图片消失的问题

嘿，我太懂你遇到的这个问题了！之前玩Canvas动画的时候也踩过一模一样的坑——不加clearRect时图片移动好好的，一加就直接消失，核心问题大多出在绘制顺序或者图片加载时机上，给你捋清楚正确的写法：

常见错误原因

你大概率是把clearRect()放在了绘制图片的代码后面，刚画完的图片立刻就被清除了；或者没等图片加载完成就启动了动画，导致clear之后根本没东西能画出来。

正确的代码示例

下面是完整可运行的代码，每一步都标了注释：

<html>
<head>
    <style>
        #canvas_id{ border:1px solid red; }
    </style>
</head>
<body>
    <!-- 一定要给canvas设置width和height属性，别只靠CSS！ -->
    <canvas id="canvas_id" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById("canvas_id");
        const ctx = canvas.getContext("2d");
        const img = new Image();
        let x = 0; // 控制图片X轴位置，实现移动

        // 关键：等图片完全加载完成再启动动画
        img.onload = function() {
            requestAnimationFrame(animate); // 用这个做动画比setInterval更流畅
        };
        // 替换成你的图片路径（本地或在线都可以）
        img.src = "https://picsum.photos/100/80";

        function animate() {
            // 第一步：先清除整个画布！这一步必须在绘制之前
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 第二步：绘制当前位置的图片
            ctx.drawImage(img, x, 50); // 50是Y轴固定位置，你可以自己改

            // 第三步：更新位置，实现移动效果
            x += 1;
            // 超出画布后重置位置，循环移动
            if (x > canvas.width) {
                x = -img.width;
            }

            // 持续调用动画帧
            requestAnimationFrame(animate);
        }
    </script>
</body>
</html>

核心注意点

顺序不能乱：clearRect() → 绘制内容 → 更新位置，这个顺序是动画的核心，颠倒的话要么清掉刚画的内容，要么留下残影。
图片加载异步处理：图片加载需要时间，必须在img.onload回调里启动动画，否则一开始调用drawImage时图片还没加载好，画布上什么都不会显示。
clearRect的范围要对：用0, 0, canvas.width, canvas.height可以清除整个画布，如果你只想清除图片原来的位置，也可以计算图片的区域（比如ctx.clearRect(x - 1, 50, img.width, img.height)），但清除整个画布在动画里更简单可靠。

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