画布动画不断重绘之前的帧

Question

我现在正在计算这个不健康的时间，我没有找到任何关于这个错误的注释。我开始用 JavaScript 构建一个简单的 HTML Canvas 动画。现在我预计小方块会移动。这是代码（我也在使用babeljs）：

class Pod {
  constructor(x,y) {        
    this.posX = x;
    this.posY = y;
    this.velX = getRandomNumber(-5,5);
    this.velY = getRandomNumber(-5,5);    
  }

  getPos() {
    return ([this.posX,this.posY]);
  }

  move() {
    this.posX += this.velX;
    this.posY += this.velY;
  }

  render() {    
    ctx.save();   
    ctx.rect(this.posX,this.posY,3,3);
    ctx.fillStyle = "#ffffff";
    ctx.fill();
    ctx.restore();
  }
}
/*the classes end here*/

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

var elementsNum = 10;

const stack = new Array(elementsNum);

for(var i = 0; i < elementsNum; i++) {
  stack[i] = new Pod(getRandomNumber(0,500),getRandomNumber(0,500));
}


function run() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#000000";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx = canvas.getContext('2d');
  for(var i = 0; i < elementsNum; i++) {
    stack[i].move();
    stack[i].render();
  }
  //window.requestAnimationFrame(run);
}


/*helper functions*/
function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

在运行一个函数run()之后，小方块（我称之为Pods）被渲染。下一个循环从使用 ctx.clearRect... 清除画布开始。我正在重置上下文并开始移动，然后从堆栈中绘制 Pod。当我绘制第一个 Pod 时，它会绘制所有这些以及上一帧。

这是此特定脚本的代码笔：http://codepen.io/erikputz/pen/YNNXqX

（我故意注释了requestAnimationFrame，所以需要使用控制台调用run()函数）

感谢您的帮助。

Answer 1

http://codepen.io/zfrisch/pen/bgazyO

这应该可以解决您的问题：

render() {    

ctx.beginPath();
ctx.rect(this.posX,this.posY,3,3);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();

}

使用画布，您需要使用beginPath 和closePath 方法通过代码识别各个形状。在某些方法中，这是与生俱来的，例如 fillRect。因此，上面的代码可以进一步简化为：

render() {    
ctx.fillStyle = "#ffffff";
ctx.fillRect(this.posX,this.posY,3,3);  
}

当您只是声明一个形状 (rect) 时，您需要指定路径的开始时间和关闭时间，否则很可能会导致您在原始代码中出现的形状出血等问题。

另外，作为提示，您不需要保存 state.save() / .restore()，除非您在画布元素上进行平移/缩放/旋转/或移动。填充形状不适用。