当t与MDN类似时，为什么我的代码不能正常工作？ （OOP）

Question

这是MDN的球速代码：

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  raf = window.requestAnimationFrame(draw);
};

canvas.addEventListener('mouseover', function(e){
  raf = window.requestAnimationFrame(draw);
});

ball.draw();

我的代码在这里：

var Ball = function(x, y, vx, vy, r, color) {
  this.x = x;
  this.y = y;
  this.vx = vx;
  this.vy = vy;
  this.radius = r;
  this.color = color;
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
  }
};

function movement() {
  pingPong.draw();
  pingPong.x += pingPong.vx;
  pingPong.y += pingPong.vy;
  raf = window.requestAnimationFrame(movement);
};

canvas.addEventListener('mouseover', function(e){
  raf = window.requestAnimationFrame(movement);
});

var pingPong = new Ball(100, 100, 5, 1, 15, 'black');

pingPong.draw();

我无法理解为什么我的球没有被重新绘制。对我来说，他们看起来完全一样，我有console.log＆＃39; d我的x和y坐标，他们正在更新它们应该是。谁能告诉我为什么我的工作不起作用？

Answer 1

MDN的

ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = this.color;

此致

ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = color;

在您的代码中，您没有使用this.作为前缀，这可能会使您的对象没有颜色并被放置在屏幕之外。