Se agregó la funcionalidad del cambio de color de carácteres
This commit is contained in:
parent
07a53bbe37
commit
fca6c9a0cf
17
index.html
17
index.html
|
@ -34,13 +34,14 @@
|
|||
<input type="color" value="#000000" id="colorPicker">
|
||||
<canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
|
||||
<script>
|
||||
const colorPicker = document.getElementById("colorPicker");
|
||||
const lienzo = document.getElementById("lienzoCuadriculado");
|
||||
const contexto = lienzo.getContext("2d");
|
||||
const tamanoCuadricula = 20; // Tamaño de cada celda en píxeles
|
||||
let dibujando = false;
|
||||
const seleccionAscii = document.getElementById("seleccionAscii");
|
||||
|
||||
// Mapa para almacenar los caracteres dibujados
|
||||
// Mapa para almacenar los caracteres y sus colores
|
||||
const caracteresEnPosiciones = new Map();
|
||||
|
||||
function dibujarCuadricula() {
|
||||
|
@ -65,23 +66,25 @@
|
|||
|
||||
function dibujarAscii(x, y) {
|
||||
const ascii = seleccionAscii.value;
|
||||
const color = colorPicker.value;
|
||||
const posicionClave = `${x},${y}`;
|
||||
const caracterActual = caracteresEnPosiciones.get(posicionClave);
|
||||
const caracterInfo = caracteresEnPosiciones.get(posicionClave);
|
||||
|
||||
// Solo dibuja si la celda está vacía o si el carácter es diferente
|
||||
if (!caracterActual || caracterActual !== ascii) {
|
||||
// Solo dibuja si la celda está vacía o si el carácter o color es diferente
|
||||
if (!caracterInfo || caracterInfo.ascii !== ascii || caracterInfo.color !== color) {
|
||||
// Limpia la celda antes de dibujar
|
||||
contexto.clearRect(x, y, tamanoCuadricula, tamanoCuadricula);
|
||||
// Redibuja la línea de la cuadrícula para esa celda
|
||||
contexto.strokeStyle = "#ddd";
|
||||
contexto.strokeRect(x, y, tamanoCuadricula, tamanoCuadricula);
|
||||
|
||||
// Dibuja el nuevo carácter
|
||||
// Dibuja el nuevo carácter con el color seleccionado
|
||||
contexto.font = `${tamanoCuadricula}px monospace`;
|
||||
contexto.fillStyle = color;
|
||||
contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
|
||||
|
||||
// Almacena el nuevo carácter en el mapa
|
||||
caracteresEnPosiciones.set(posicionClave, ascii);
|
||||
// Almacena el nuevo carácter y su color en el mapa
|
||||
caracteresEnPosiciones.set(posicionClave, { ascii, color });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue