javascript - 调整窗口大小时 Canvas 元素没有响应

Question

我正在尝试让在屏幕中间绘制的圆圈在调整窗口大小时做出响应。我正在寻找的问题是，它是来自未在动画循环中更新的对象的 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()

Answer 1

您只需更改调整大小事件即可重置数组中每个 ball 实例的 x 和 y 值。

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
    ballArr.forEach(ball => {
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
    });

    // 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()

<canvas>