如何在不使用clearRect函数的情况下用JavaScript Canvas制作动画？

针对你的需求，这里有三种适合初学者的解决方案，按推荐程度排序：

方案1：分层Canvas（最推荐） #

用两个Canvas元素重叠放置，一个专门绘制静态图形，另一个负责动画。这样动画层的clearRect不会影响静态层，逻辑清晰且性能友好。

修改后的完整代码：

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazioni con canvas</title>
<style>
  /* 让两个Canvas绝对定位重叠 */
  #staticCanvas, #animationCanvas {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
</head>
<body>
<!-- 静态图形层（底层） -->
<canvas id="staticCanvas">canvas not supported.</canvas>
<!-- 动画元素层（顶层） -->
<canvas id="animationCanvas">canvas not supported.</canvas>
<script>
// 初始化静态层
let staticCanvas = document.getElementById("staticCanvas");
let staticCtx = staticCanvas.getContext("2d");
staticCanvas.width = 600;
staticCanvas.height = 400;

// 绘制静态绿色矩形
staticCtx.fillStyle = "greenyellow";
staticCtx.fillRect(10,10,100,100);

// 初始化动画层
let animationCanvas = document.getElementById("animationCanvas");
let ctx = animationCanvas.getContext("2d");
animationCanvas.width = 600;
animationCanvas.height = 400;

const step = 5;
let x = 0;

let loop = () => {
  // 只清除动画层内容
  ctx.clearRect(0, 0, animationCanvas.width, animationCanvas.height);  
  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.stroke(); 
  x = x + step;
  if(x === animationCanvas.width + 50) x = -50;
  requestAnimationFrame(loop)
};

requestAnimationFrame(loop)
</script>
</body>
</html>

解释：通过CSS绝对定位让两个Canvas完全重叠，静态层默认在下方，动画层在上方。动画循环只操作上层Canvas，不会干扰底层的静态图形。

方案2：每次循环重绘静态图形 #

如果不想新增Canvas，可以在每次动画循环里，先清屏，再重新绘制静态图形，最后画动画元素。这种方法简单直观，适合静态图形不多的场景。

修改后的循环部分代码：

let loop = () => {
  ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);  

  // 重新绘制静态矩形
  ctx.fillStyle = "greenyellow";
  ctx.fillRect(10,10,100,100);

  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.stroke(); 
  x = x + step;
  if(x === mycanvas.width + 50) x = -50;
  requestAnimationFrame(loop)
};

解释：每次循环先清空整个Canvas，再把静态矩形重新画一遍，最后绘制移动的圆。视觉上静态图形会一直保留，动画也能正常运行。

方案3：保存静态图形为ImageData #

先绘制好静态图形，用getImageData把Canvas的像素状态保存下来，每次循环先恢复这个状态，再画动画元素。适合静态图形完全不会变化的场景。

修改后的完整代码：

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazioni con canvas</title>
<link rel="stylesheet" type="text/css" href="stile.css">
<script type="text/javascript" src="codice.js"></script>
</head>
<body>
<canvas id="mycanvas">canvas not supported.</canvas>
<script>
let mycanvas = document.getElementById("mycanvas");
let ctx = mycanvas.getContext("2d");
mycanvas.width = 600;
mycanvas.height = 400;

// 绘制静态图形
ctx.fillStyle = "greenyellow";
ctx.fillRect(10,10,100,100);

// 保存静态图形的像素数据
const staticImage = ctx.getImageData(0, 0, mycanvas.width, mycanvas.height);

const step = 5;
let x = 0;

let loop = () => {
  // 恢复静态图形
  ctx.putImageData(staticImage, 0, 0);  

  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.stroke(); 
  x = x + step;
  if(x === mycanvas.width + 50) x = -50;
  requestAnimationFrame(loop)
};

requestAnimationFrame(loop)
</script>
</body>
</html>

解释：getImageData会捕获当前Canvas的所有像素信息，putImageData则快速将这些像素还原到Canvas上，相当于每次循环都一键恢复静态图形，再叠加动画元素。

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