我正在尝试调整窗口大小时在屏幕中间绘制的圆圈具有响应性。我正在查看的问题是,它是来自对象的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()
答案 0 :(得分:0)
您只需要更改您的大小调整事件,即可为数组中每个x
实例重置y
和ball
值。
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>