Canvas重复绘制多个图形问题：小球移动时旧图形未清除出现重影

问题根因 #

Canvas 属于像素级即时绘图容器，所有绘制操作的结果会直接保留在画布上，当前代码未在每次更新小球位置前清空上一帧的绘制内容，因此之前渲染的小球会一直留存，最终呈现出多个重复图形堆叠的效果。

修复方法 #

在每次绘制新的小球前，调用 Canvas 上下文的 clearRect() 方法清空整个画布即可。

修正后 JavaScript 代码 #

var GameCanvas = document.getElementById("Game");
var GameCtx = GameCanvas.getContext("2d");
var BallSprite = 50;

window.onload = function () {
  setInterval(HoldSprites, 100);
}

function HoldSprites() {
  // 清空整个画布
  GameCtx.clearRect(0, 0, GameCanvas.width, GameCanvas.height);
  BallSprite = BallSprite + 10;
  GameCtx.beginPath();
  GameCtx.arc(BallSprite, 50, 40, 0, 2 * Math.PI);
  GameCtx.stroke();
}

额外优化点 #

• 原代码中var GameCanvas = GameCanvas = document.getElementById("Game");属于重复赋值的冗余写法，直接单次赋值即可
• 原代码var GameCtx = GameCtx = GameCanvas.getContext("2d");;末尾多了多余的分号，可删除

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