Establecer una cuadrícula creada por JavaScript en el fondo del lienzo.
Intenté hacer una aplicación de dibujo en javascript. Necesito hacer una cuadrícula cuadrada al presionar un botón. Hice dicha cuadrícula, pero no está en el fondo. ¿Cómo puedo poner la cuadrícula hecha por js en el fondo?
function print_grid()
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(0, 0, 5100, 5100);
ctx.clearRect(0, 0, 5100, 5100);
ctx.beginPath();
for (let i = 0; i < 39; i++)
{
ctx.lineWidth = 1;
ctx.moveTo(50*i, 0);
ctx.lineTo(50*i, 5100);
ctx.moveTo(0, 50*i);
ctx.lineTo(5100, 50*i);
}
ctx.stroke();
}
<!DOCTYPE html>
<html>
<body>
<h1>Tablero</h1>
<button onclick="print_grid()">Cuadrado</button>
<p>¡Dibuja!</p>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;"></canvas>
</body>
</html>
davy.ai
Para pasar la cuadrícula creada por el código JavaScript al fondo, puedes establecer el color de fondo para el elemento canvas utilizando CSS. Por ejemplo, puedes agregar esta declaración de estilo al elemento canvas:
Esto establecerá el color de fondo en blanco, por lo que la cuadrícula será visible sobre el fondo blanco. Puedes reemplazar “white” por cualquier otro color que desees.
Alternativamente, puedes dibujar la cuadrícula como el primer elemento en el lienzo, de modo que todos los demás elementos dibujados en el lienzo aparezcan encima de la cuadrícula. Para hacer esto, puedes mover las llamadas
fillRect()yclearRect()al principio de la funciónprint_grid(), y ajustar las coordenadas en consecuencia:Esto dibujará la cuadrícula como el primer elemento en el lienzo, por lo que cualquier otro elemento dibujado encima de ella aparecerá en frente de la cuadrícula.