javascript - Canvas 动画 Javascript 反向

Question

我有一个从上到下下降的 Canvas 动画，但我想反转它(从下到上)。我不知道如何改变方向

我的代码在这里

http://js.do/code/176399

示例:

  function Ember(x, y, s /*radius*/ , p /*num points*/ ) {
  this.x = x;
  this.y = y;
  this.s = s;
  this.p = p;
  this.img = document.createElement('canvas');
  var context = this.img.getContext('2d'),
    len = this.s / 1.45;
  this.img.height = this.img.width = this.s * 2;
  context.translate(this.s, this.s);
  context.rotate((Math.PI * 1 / 10));
  context.beginPath();
  for (var i = 0; i < p; i++) {
    context.lineTo(0, -s);
    context.rotate((Math.PI * 2 / (p * 2)));
    context.lineTo(0, s);
    context.rotate((Math.PI * 2 / (p * 2)));
  }
  context.closePath();
  context.shadowBlur = this.s / 3;
  context.shadowColor = 'rgba(174, 12, 1, 0.9)';
  context.fillStyle = 'rgba(133,80,33,.45)';
  context.fill();
}

只需要将“下降”从下到上反转即可。

更新:遵循 Jared 的建议

更改:

embers[i].y += embers[i].vy;

至:

embers[i].y -= embers[i].vy;

但是，我只得到一个动画周期，希望它能够在屏幕上不断地制作新的 Ember 动画

Answer 1

看一下更新 ember 的 Y 位置的这一行:

 embers[i].y = -embers[i].s;

尝试将其更改为这样的内容:

  embers[i].y = embers[i].s;