Javascript 设置画布对象的动画

我制作了一个包含两个函数的构造函数。其中一个是

update（）

，在

update函数中有两个条件应该更新
this.dx
或
this.dy
值，但它们不更新值

以下是JS Fiddle链接：

但是，当我在构造函数外部使用相同的条件时（在
animate（）
函数内部），它正在工作：

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

以下是JS Fiddle链接：
请检查此代码段：


var canvas=document.getElementById（'canvas'），
c=canvas.getContext（'2d'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
函数圆（x，y，dx，dy，半径）{
这个。x=x
这个。y=y
this.dx=dx
this.dy=dy
这个半径=半径
this.draw=函数（）{
c、 beginPath（）
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2，false）
c、 strokeStyle=‘蓝色’
c、 笔划（）
}
this.update=函数（）{
// ######################
//dx&dy值未使用此代码更新
如果（this.x+this.radius>innerWidth | | this.x-this.radius<0）{
this.dx=-this.dx
console.log（'dx是'+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
这个.draw（）
}
}
var x=200，
y=200，
dx=3，
dy=3，
半径=30
函数animate（）{
请求动画帧（动画）
c、 clearRect（0，0，innerWidth，innerHeight）
变量圆=新圆（x，y，dx，dy，半径）
circle.update（）
//如果（x+半径>内宽| | x-半径<0）{
//dx=-dx
// }
//如果（y+半径>内高| | y-半径<0）{
//dy=-dy
// }
//x+=dx
//y+=dy
}
设置动画（）
正文{
保证金：0；
}

更新函数应更新this.dx或this.dy值，但不更新该值

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

只需在animate函数之外调用这个变量
var圆=新圆（x，y，dx，dy，半径）

每次
animate function
移除旧圆并使用预定义的
x、y、dx、dy和半径值创建新圆时，您都会在
animate function
内部调用
constructor function
 “构造函数不打算更新对象值”请发布您的问题，以便清楚您的问题是什么。我不清楚您说了什么，请解释一下。我只是禁用了
中的条件。更新
&在构造函数之外使用相同的条件，现在动画正在工作。支票，请：