Question

我制作了一个包含两个函数的构造函数。其中一个update()，在update function中，有两个条件应更新this.dx或this.dy的值，但不更新该值。

这是JS Fiddle链接：https://jsfiddle.net/c9gnub14/

但是当我在构造函数外部（在animate()函数内部）使用相同的条件时，它正在工作：https://jsfiddle.net/b8h6j1vn/1/

实际上，我想为我的画布对象设置动画，您能告诉我这段代码有什么问题吗？

这是JS Fiddle链接：https://jsfiddle.net/c9gnub14/ 请检查此代码段：

var canvas = document.getElementById('canvas'),
  c = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

function Circle(x, y, dx, dy, radius) {
  this.x = x
  this.y = y
  this.dx = dx
  this.dy = dy
  this.radius = radius

  this.draw = function() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.strokeStyle = 'blue'
    c.stroke()
  }

  this.update = function() {
    // ######################
    // dx & dy value is not updating with this code

    if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
      this.dx = -this.dx
      console.log('dx is ' + this.dx)
    }
    if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
      this.dy = -this.dy
      console.log('dy is ' + this.dx)
    }

    this.x += this.dx
    this.y += this.dy
    this.draw()
  }
}

var x = 200,
  y = 200,
  dx = 3,
  dy = 3,
  radius = 30

function animate() {
  requestAnimationFrame(animate)
  c.clearRect(0, 0, innerWidth, innerHeight)
  var circle = new Circle(x, y, dx, dy, radius)
  circle.update()

  // if (x + radius > innerWidth || x - radius < 0) {
  //     dx = -dx
  // }
  // if (y + radius > innerHeight || y - radius < 0) {
  //     dy = -dy
  // }

  // x += dx
  // y += dy
}

animate()

body {
  margin: 0;
}

<canvas id="canvas"></canvas>

Answer 1

更新功能应更新this.dx或this.dy值，但不更新该值，

根据您编写的逻辑，如果圆不在屏幕上，它将仅更新这些值。但这不是屏幕外的。中心点为200,200，半径为30，因此它的范围是170到230，该点已经在屏幕上显示，因此dx和dy都不会改变。

Answer 2

只需在animate函数之外调用此变量 var circle = new Circle(x, y, dx, dy, radius)

每次constructor function移出旧圈子并使用预定义的animate function值创建一个新圈子时，您就在animate function内部叫x, y, dx, dy and radius。

动画画布对象

2 个答案: