Question

我有一个带椭圆形气泡的气泡场。我希望气泡伸展 - 伸长 - 当它们移动到画布的边缘时。这适用于两侧，但顶部和底部气泡变得扁平化。我试图用atan2来识别角度并指出那个泡沫的鼻子朝那个方向发展。

但是当我添加旋转时，所有气泡都会旋转。有没有办法捕获每个气泡，计算它的角度，只旋转那个气泡而不是整个背景？ ctx.rotation旋转整个画布。说得通。但this.rotation（目前在我的codepen的第149行注释掉了）所有气泡都在旋转。

bubble.prototype.draw = function(){  

  ctx.beginPath();
  ctx.save();


  var p1 = { x: 0, y: 0 };

  var p2 = { x: this.location.x, y: this.location.y };

  this.rotation = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

  ctx.fillStyle = this.colour;
  ctx.ellipse(this.location.x, this.location.y, 
              this.radius, this.radiusY, 
              this.rotation, 
              0,360, 0);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

Here's the whole codepen

或许还有另一种方法可以根据它们的光芒辐射出形状？

Answer 1

我将轮换计算移出bubble.prototype.draw并进入bubble函数。然后，我采取了速度而不是位置，一切都排好了！

var p2 = { x: this.velocity.x, y: this.velocity.y };

Codepen已更新！

画布椭圆全部旋转到相同的角度

1 个答案: