let canvas, ctx, W, H; canvas = document.createElement('canvas'); document.body.appendChild(canvas); ctx = canvas.getContext('2d'); let objArr = []; const init = () => { canvas.width = W = innerWidth; canvas.height = H = innerHeight; canvas.style.background = '#dedfda'; for (let i = 0; i <= 5; i++) { let r = (i + 1) * 20; objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r)); objArr[0].draw(); } animate(); } const random = (min = 0, max = 1) => Math.random() * (max - min) + min; class Rectangle { constructor(posX, posY, w, h, color, cx, cy, r) { this.posX = posX; this.posY = posY; this.w = w; this.h = h; this.color = color; this.cx = cx; this.cy = cy; this.r = r; this.angle = 0; } draw() { ctx.clearRect(0, 0, innerWidth, innerHeight); ctx.fillStyle = this.color; ctx.fillRect(this.posX, this.posY, this.w, this.h); } update() { this.angle += 0.1; this.posX = this.cx + this.r * Math.cos(this.angle); this.posY = this.cy + this.r * Math.sin(this.angle); this.draw(); } } const animate = () => { objArr.forEach(e => { e.update(); }) requestAnimationFrame(animate); } window.onload = init;En este código, espero una salida con 5 rectángulos que giran alrededor del punto central de la ventana en diferentes radios, como los planetas que giran alrededor del Sol en el sistema solar.
Pero obtengo solo un rectángulo y ni siquiera gira.
Atascado y sin entender por qué no funciona.
Su función de draw se borra cada vez y solo está haciendo referencia al primer elemento de la matriz. El ajuste para ambos muestra 6 objetos girando. Su ciclo se ejecuta de 0 a 5. Si desea 5 objetos, deberá establecer el límite superior en 4.
let canvas, ctx, W, H; canvas = document.createElement('canvas'); document.body.appendChild(canvas); ctx = canvas.getContext('2d'); let objArr = []; const init = () => { canvas.width = W = innerWidth; canvas.height = H = innerHeight; canvas.style.background = '#dedfda'; // adjusted range for (let i = 0; i <= 4; i++) { let r = (i + 1) * 20; objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r)); objArr[i].draw(); } animate(); } const random = (min = 0, max = 1) => Math.random() * (max - min) + min; class Rectangle { constructor(posX, posY, w, h, color, cx, cy, r) { this.posX = posX; this.posY = posY; this.w = w; this.h = h; this.color = color; this.cx = cx; this.cy = cy; this.r = r; this.angle = 0; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.posX, this.posY, this.w, this.h); } update() { this.angle += 0.1; this.posX = this.cx + this.r * Math.cos(this.angle); this.posY = this.cy + this.r * Math.sin(this.angle); this.draw(); } } const animate = () => { // moved clear here to happen just once on each animate ctx.clearRect(0, 0, innerWidth, innerHeight); objArr.forEach(e => { e.update(); }) requestAnimationFrame(animate); } window.onload = init;Solo estás dibujando un rectángulo. presta atención a
objArr[0].draw()cual deberia ser
objArr[i].draw() Además, creo que cada vez que se llama al método de draw de un objeto Rectange , todo el lienzo se borra en esta línea
ctx.clearRect(0, 0, innerWidth, innerHeight);Por lo tanto, solo aparece un rectángulo en todo momento.
Una solución sería mover las llamadas a clearRect y update desde Rectangle a la función de animate . De esta manera encaja mejor con la lógica del programa. Un Rectángulo que es un objeto solo debe saber cómo dibujarse a sí mismo sin borrar el lienzo y actualizar su posición en el lienzo.
A continuación se muestra mi solución.
let canvas, ctx, W, H; canvas = document.createElement('canvas'); document.body.appendChild(canvas); ctx = canvas.getContext('2d'); let objArr = []; const init = () => { canvas.width = W = innerWidth; canvas.height = H = innerHeight; canvas.style.background = '#dedfda'; for (let i = 0; i <= 5; i++) { let r = (i + 1) * 20; objArr.push(new Rectangle(W / 2, H / 2, 10, 10, "red", innerWidth / 2, innerHeight / 2, r)); objArr[i].draw(); } animate(); } const random = (min = 0, max = 1) => Math.random() * (max - min) + min; class Rectangle { constructor(posX, posY, w, h, color, cx, cy, r) { this.posX = posX; this.posY = posY; this.w = w; this.h = h; this.color = color; this.cx = cx; this.cy = cy; this.r = r; this.angle = 0; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.posX, this.posY, this.w, this.h); } // Should be moved outside of this class. update() { this.angle += 0.1; this.posX = this.cx + this.r * Math.cos(this.angle); this.posY = this.cy + this.r * Math.sin(this.angle); ctx.fillRect(this.posX, this.posY, this.w, this.h) } } const animate = () => { ctx.clearRect(0, 0, innerWidth, innerHeight); objArr.forEach(e => { e.update(); }) requestAnimationFrame(animate); } window.onload = init;