Estoy escribiendo un código muy básico (recién comencé a aprender) usando Javascript y lienzo. Trato de hacer algunos dibujos al azar (los rectángulos tienen un 50% de posibilidades de aparecer en ciertos lugares). Una vez que esto suceda, quiero que el navegador espere un segundo, borre la pantalla y vuelva a dibujarla instantáneamente (visualmente, un dibujo debe reemplazarse instantáneamente por otro).
Cuando lo hago, parece que el lienzo no quiere actualizarse, solo se actualiza una vez cuando finaliza el ciclo principal, puede encontrar el código a continuación:
<script> let canvas = document.querySelector("canvas"); let context = canvas.getContext("2d"); function wait(ms) { var start = new Date().getTime(); var end = start; while (end < start + ms) { end = new Date().getTime(); } } for (let k = 0; k < 3; k++) { context.clearRect(0, 0, canvas.width, canvas.height); console.log("First checkpoint"); for (let i = 0; i < 5; i++) { for (j = 0; j < 5; j++) { let width_custom = 60; let height_custom = 60; let gap = 20; let x = 100 + (width_custom + gap) * i; let y = 100 + (height_custom + gap) * j; context.beginPath(); context.rect(x, y, width_custom, height_custom); context.stroke(); if (Math.random() > 0.5) { context.beginPath(); context.rect(x + 8, y + 8, width_custom - 16, height_custom - 16); context.stroke(); } } } wait(1000); console.log("Second checkpoint"); }¿Hay alguna forma de forzar que el lienzo se actualice durante el ciclo ?
Mejor, estera
Su función de wait va en contra de la naturaleza asíncrona de javascript. Estás bloqueando el programa de una manera para que las cosas no se actualicen. Debería usar setTimeout para este tipo de cosas (o setInterval o incluso mejor requestAnimationFrame ).
He preparado un ejemplo bastante confuso pero divertido de cómo hacer un bucle asincrónico y esperar. Estoy seguro de que otras personas sugerirán usar Promise en su lugar. O await y async . Está todo bien.
let canvas = document.querySelector("canvas"); let context = canvas.getContext("2d"); my_loop(3) function my_loop(k) { if (k > 0) { one_round(1000, function() { my_loop(k - 1) }) } } function one_round(delay, foo_then) { context.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < 5; i++) { for (j = 0; j < 5; j++) { let width_custom = 60; let height_custom = 60; let gap = 20; let x = 100 + (width_custom + gap) * i; let y = 100 + (height_custom + gap) * j; context.beginPath(); context.rect(x, y, width_custom, height_custom); context.stroke(); if (Math.random() > 0.5) { context.beginPath(); context.rect(x + 8, y + 8, width_custom - 16, height_custom - 16); context.stroke(); } } } setTimeout(foo_then, delay); } <canvas></canvas>