如何在图形移动时实现画面刷新，避免重复绘制图形？

嘿，这个坑我刚学绘图的时候也踩过！核心逻辑其实特别简单：每次在新位置绘制矩形前，必须先把之前的旧矩形痕迹清除掉，不然系统就会在原来的基础上叠加新的图形，自然就出现多个矩形了。下面给你分几种常见的开发场景，附上具体的实现方案：

核心思路总结 #

• 简单场景：直接清除整个画布，再绘制新位置的矩形
• 高效场景：只清除旧矩形所在的区域，适合画面里还有其他元素的情况

示例1：HTML5 Canvas 实现 #

如果是前端用Canvas做动态绘图，代码可以这么写：

<canvas id="moveBoxCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('moveBoxCanvas');
const ctx = canvas.getContext('2d');

// 初始化矩形参数
let boxX = 0;
let boxY = 0;
const boxSize = 50;

function updateAndDraw() {
  // 第一步：清除旧矩形的区域（精准清除，不影响其他元素）
  ctx.clearRect(boxX, boxY, boxSize, boxSize);
  
  // 更新矩形位置
  boxY += 1;
  // 超出屏幕就重置位置
  if (boxY > canvas.height) boxY = 0;
  
  // 第二步：在新位置绘制蓝色矩形
  ctx.fillStyle = '#007bff';
  ctx.fillRect(boxX, boxY, boxSize, boxSize);
  
  // 循环调用实现动画
  requestAnimationFrame(updateAndDraw);
}

// 启动绘制
updateAndDraw();
</script>

要是你的画布上只有这一个矩形，也可以用ctx.clearRect(0, 0, canvas.width, canvas.height)直接清整个画布，代码更简单。

示例2：Python Pygame 实现 #

如果是用Pygame做小游戏类的开发，逻辑是一样的：

import pygame
import sys

pygame.init()
screen = pygame.display.set_mode((400, 400))
clock = pygame.time.Clock()

# 用Rect对象管理矩形的位置和大小
box_rect = pygame.Rect(0, 0, 50, 50)
move_speed = 2

running = True
while running:
    # 处理退出事件
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # 第一步：用白色背景覆盖旧矩形区域
    screen.fill((255, 255, 255), box_rect)
    
    # 更新位置
    box_rect.y += move_speed
    if box_rect.bottom > screen.get_height():
        box_rect.y = 0
    
    # 第二步：绘制新位置的矩形
    pygame.draw.rect(screen, (0, 0, 255), box_rect)
    
    # 更新屏幕显示
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()

这里screen.fill的第二个参数传入旧的box_rect，就只会清除之前矩形占的那块区域，不会影响画布上的其他元素。

额外提示 #

如果是用Java Swing、Qt这类GUI框架，一般不需要手动清除旧区域——你只需要维护矩形的坐标变量，然后调用组件的repaint()方法，框架会自动负责清除旧画面并绘制新的内容。

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