基于HTML5 Canvas实现图片扫描线效果的问题求助：解决clearRect清除底层图片的问题

我来帮你搞定这个Canvas扫描线的问题，你的代码里有几个核心问题需要调整，我一步步给你拆解：

问题根源分析 #

• 重复加载图片：你的draw函数被requestAnimationFrame反复调用，每次都重新创建Image对象并加载图片，这不仅浪费资源，还会因为图片加载的异步性打乱绘制顺序。
• 绘制流程错误：要让扫描线在图片上移动，正确的帧更新流程应该是：清除画布 → 重绘图片 → 绘制扫描线，而你之前的逻辑没有遵循这个顺序，导致用clearRect就会把图片清掉，不清的话扫描线会留下拖影。

修改后的完整代码 #

// 初始化全局变量
var x = 4, y = 4, speed = 1, isBottom = false;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// 只加载一次图片
img.src = imagetag.src;

img.onload = function() {
    // 图片加载完成后设置画布尺寸
    canvas.width = img.width / 2;
    canvas.height = img.height / 2;
    // 启动动画循环
    requestAnimationFrame(draw);
};

function draw() {
    // 1. 清除整个画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 2. 重绘图片（这一步是关键，每次帧更新都要把图片画回来）
    ctx.drawImage(img, 0, 0, img.width / 2, img.height / 2);
    
    // 3. 绘制扫描线
    ctx.fillStyle = '#07C';
    ctx.lineCap = 'round';
    ctx.shadowBlur = 18;
    ctx.shadowColor = "#07C";
    ctx.fillRect(x, y, 210, 10);
    
    // 4. 更新扫描线位置，修复边界判断（用>=/<=代替严格等于，避免浮点数精度问题）
    if (!isBottom && y < canvas.height - 14) {
        y += speed;
    } else if (y >= canvas.height - 14) {
        isBottom = true;
    }
    
    if (isBottom && y > 4) {
        y -= speed;
    } else if (y <= 4) {
        isBottom = false;
    }
    
    // 继续下一帧
    requestAnimationFrame(draw);
}

关键修改说明 #

1. 图片只加载一次：把图片初始化和加载的逻辑放在动画循环外面，只有当图片加载完成后才启动动画，避免重复加载导致的问题。
2. 正确的绘制顺序：每次帧更新时先清除整个画布，然后立刻重绘图片，最后再绘制扫描线。这样clearRect只会清除上一帧的内容，然后我们马上把图片画回来，就不会出现图片被清除后消失的情况。
3. 修复边界判断：把原来的y === canvas.height -14改成y >= canvas.height -14，避免因为speed不是整数或者浮点数精度问题导致扫描线卡在边界无法切换方向。

这样修改后，扫描线就能在图片上方正常上下移动，不会出现图片被清除的问题啦！

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