Javascript 调整窗口大小时画布元素没有响应 我试图让在屏幕中间绘制的圆在调整窗口大小时响应。我看到的问题是，它是来自动画循环中未更新的对象的ballArr[I].update（）。当我初始化并直接在动画循环中创建一个球时，它显然可以很好地工作，但不能用于ballArr中的球 const canvas = document.querySelector('canvas') const c = canvas.getContext('2d') canvas.width = window.innerWidth canvas.height = window.innerHeight let mouse = { x: innerWidth / 2, y: innerHeight / 2 } window.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }) window.addEventListener('resize', function() { canvas.width = window.innerWidth canvas.height = window.innerHeight // init(); }) function Ball(x, y, radius, dx, color) { this.x = x this.y = y this.radius = radius this.color = color this.dx = dx this.draw = function(){ c.beginPath() c.strokeStyle = this.color c.arc(this.x, this.y, this.radius, 0, Math.PI * 2) c.stroke() c.closePath() } this.update = function(){ if( this.radius * 2 > canvas.width || this.radius * 2 < 10) { this.dx = -this.dx } this.radius += this.dx this.draw() } } let ballArr = [] function init(){ ballArr.push(new Ball(canvas.width/2, canvas.height/2, 10, 3)) } function animate(){ c.clearRect(0, 0, canvas.width, canvas.height) // this works as the ball created inside a animate function // let ball = new Ball(canvas.width/2, canvas.height/2, 60, 3, "blue") // ball.draw() // but not this one.. for(let i = 0; i < ballArr.length; i++) { ballArr[i].update() console.log(ballArr[i]); } requestAnimationFrame(animate) } init() animate() const canvas=document.querySelector（'canvas'） const c=canvas.getContext（'2d'） canvas.width=window.innerWidth canvas.height=window.innerHeight 让鼠标={ x:innerWidth/2， y:内部高度/2 } window.addEventListener（'mousemove'，函数（e）{ mouse.x=e.clientX； mouse.y=e.clientY； }) addEventListener（'resize'，function（））{ canvas.width=window.innerWidth canvas.height=window.innerHeight //init（）； }) 功能球（x、y、半径、dx、颜色）{ 这个。x=x 这个。y=y 这个半径=半径 这个颜色 this.dx=dx this.draw=函数（）{ c、 beginPath（） c、 strokeStyle=this.color c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2） c、 笔划（） c、 closePath（） } this.update=函数（）{ 如果（this.radius*2>canvas.width | | this.radius*2canvas.width | | this.radius*2canvas.width | | this.radius*2

您只需更改resize事件，即可为数组中的每个

球

实例重置

x

和

y

值

const canvas=document.querySelector（'canvas'）
const c=canvas.getContext（'2d'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
让鼠标={
x:innerWidth/2，
y:内部高度/2
}
window.addEventListener（'mousemove'，函数（e）{
mouse.x=e.clientX；
mouse.y=e.clientY；
})
window.addEventListener（'resize'，函数（）{
canvas.width=window.innerWidth
canvas.height=window.innerHeight
ballArr.forEach（球=>{
ball.x=画布宽度/2；
ball.y=画布高度/2；
});
//init（）；
})
功能球（x、y、半径、dx、颜色）{
这个。x=x
这个。y=y
这个半径=半径
这个颜色
this.dx=dx
this.draw=函数（）{
c、 beginPath（）
c、 strokeStyle=this.color
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2）
c、 笔划（）
c、 closePath（）
}
this.update=函数（）{
如果（this.radius*2>canvas.width | | this.radius*2<10）{
this.dx=-this.dx
}
this.radius+=this.dx
这个.draw（）
}
}
让ballArr=[]
函数init（）{
巴拉尔推球（新球（canvas.width/2，canvas.height/2,10,3））
}
函数animate（）{
c、 clearRect（0，0，canvas.width，canvas.height）
//这与在动画功能中创建的球一样工作
//让球=新球（canvas.width/2、canvas.height/2、60、3、，
//“蓝色”）
//抽签
//但不是这个。。
for（设i=0；i

---

您只需更改调整大小事件，即可为数组中的每个

球

实例重置

x

和

y

值

const canvas=document.querySelector（'canvas'）
const c=canvas.getContext（'2d'）
canvas.width=window.innerWidth
canvas.height=window.innerHeight
让鼠标={
x:innerWidth/2，
y:内部高度/2
}
window.addEventListener（'mousemove'，函数（e）{
mouse.x=e.clientX；
mouse.y=e.clientY；
})
window.addEventListener（'resize'，函数（）{
canvas.width=window.innerWidth
canvas.height=window.innerHeight
ballArr.forEach（球=>{
ball.x=画布宽度/2；
ball.y=画布高度/2；
});
//init（）；
})
功能球（x、y、半径、dx、颜色）{
这个。x=x
这个。y=y
这个半径=半径
这个颜色
this.dx=dx
this.draw=函数（）{
c、 beginPath（）
c、 strokeStyle=this.color
c、 圆弧（this.x，this.y，this.radius，0，Math.PI*2）
c、 笔划（）
c、 closePath（）
}
this.update=函数（）{
如果（this.radius*2>canvas.width | | this.radius*2<10）{
this.dx=-this.dx
}
this.radius+=this.dx
这个.draw（）
}
}
让ballArr=[]
函数init（）{
巴拉尔推球（新球（canvas.width/2，canvas.height/2,10,3））
}
函数animate（）{
c、 clearRect（0，0，canvas.width，canvas.height）
//这与在动画功能中创建的球一样工作
//让球=新球（canvas.width/2、canvas.height/2、60、3、，
//“蓝色”）
//抽签
//但不是这个。。
for（设i=0；i

---

没问题！很乐意帮忙：）没问题！很乐意帮忙：）