0
106
VistasDivide el lienzo en 100 piezas en Javascript
Entonces, quiero dividir el lienzo en 100 cuadrados de 50x50px y quiero hacerlo con la menor cantidad de código posible. Empecé a hacerlo con bucles for pero luego necesitaría 10 bucles for. Quiero saber si hay una manera más rápida con uno para bucle más o menos 
y aquí está el código
let canvas = document.querySelector("canvas"); canvas.width = 500; canvas.height = 500; let c = canvas.getContext("2d"); let x = 0; let y = 0; for(let i = 0; i < 10; i++) { if (i==0) { c.beginPath(); c.moveTo(0, 50); c.lineTo(50, 50); c.lineTo(50, 0); c.stroke(); } x += 50; c.beginPath(); c.moveTo(x, 50); c.lineTo(x + 50, 50); c.lineTo(x + 50, 0); c.stroke(); } x = 0; y = 0; for(let i = 0; i < 10; i++) { if (i==0) { c.beginPath(); c.moveTo(0, 100); c.lineTo(50, 100); c.lineTo(50, 50); c.stroke(); } x += 50; c.beginPath(); c.moveTo(x, 100); c.lineTo(x + 50, 100); c.lineTo(x + 50, 0); c.stroke(); }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Coloque la parte del dibujo en una función y haga un bucle una vez, así:
let canvas = document.querySelector("canvas"); canvas.width = 501; canvas.height = 501; let c = canvas.getContext("2d"); function draw(X, Y, x, y) { c.beginPath(); c.moveTo(X, Y); c.lineTo(x, y); c.stroke(); } for (let n = 0.5; n < 501; n += 50) { draw(n, 0, n, 500); draw(0, n, 500.5, n); } <canvas></canvas>Tenga en cuenta que comencé el ciclo desde 0.5, esto "centra" las líneas en los píxeles del lienzo, lo que hace que la cuadrícula sea más nítida.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta