Javascript 当t类似于MDN时，为什么我的代码不起作用？（OOP）

这是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();

我不明白为什么我的球没有被重新画出来。对我来说，它们看起来完全一样，我有控制台。记录了我的x和y坐标，它们正在按应有的方式更新。有人能告诉我为什么我的坏了吗？

MDN的

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

你的

---

在您的代码中，您没有预先添加

这个。

这可能会使您的对象没有颜色并被放置在屏幕之外。

您在web控制台中遇到了哪些错误？使用内置在浏览器中的强大调试器单步执行代码时，您会看到什么？pingPong.ball（）不是任何东西，也不是：ctx.arc（x，y，r，0，Math.PI*2，true）；是错误的，它应该是ctx.arc（this.x，this.y，this.r，0，Math.PI*2，true）；很抱歉，我没有解释/输入我的全部代码。英国皇家空军被宣布为全球空军。当我用MDN的代码替换我的代码时，球会移动。当我使用调试器逐步处理代码时，我看到每次在窗口中调用移动时，x和y值都在更新；它正在调用移动函数。感谢您注意到迪梅迪奥，但代码实际上有pingPong.draw（），我已经更新了原始帖子以反映这一点。@minister-谢谢！这管用！我仍然不明白你所说的实例和构造函数参数是什么意思，但我会研究它。@t.J.Crowder它会接受传入的初始值，并在上面绘制。它会起作用，但不会update@ardhitama-我的理解是，既然我有“this.color=color”，我就可以使用“ctx.fillStyle=color”。我的球被抽了出来，但就是不动。@t.J.Crowder根据问题“我的球没有被重新画”，所以他看到了一些东西。。只是没有被重新引用：P所以ardhitama是正确的JSFIDLE，它还包括在minister上清除您的解决方案工作的画布。非常感谢你！

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