Compare commits

...

2 Commits

2 changed files with 13 additions and 8 deletions

View File

@ -1,3 +1,5 @@
# ASCII_Proyecto
Un proyecto de dibujos ASCII
Un proyecto de dibujos ASCII
Este es el primer cambio del archivo README.md

View File

@ -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 });
}
}