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（）函数的循环后，渲染小方块（我称之为 Pod ）。下一个循环开始于使用 ctx.clearRect清除画布... 我正在重置上下文并开始移动，然后从堆栈中绘制 Pod 。当我绘制第一个 Pod 时，它将绘制所有这些以及前一帧。

以下是此特定脚本的codepen：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）时，您需要指定路径何时开始以及何时关闭，否则很可能会导致您的形状出血等问题原始代码。

此外，作为提示，您不需要保存状态.save() / .restore()，除非您正在翻译/缩放/旋转/或移动canvas元素。填充形状不适用。

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

1 个答案: