Actualizado el archivo README.md

2025-02-12 07:55:45 -06:00 · 2025-02-12 07:55:45 -06:00 · 342b1f4ec7
parent 2c46161c66
commit 342b1f4ec7
2 changed files with 110 additions and 0 deletions
--- a/.README.md.swp
+++ b/.README.md.swp
--- a/index.html
+++ b/index.html
@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Canvas Cuadriculado con Pincel ASCII</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4;
+            flex-direction: column;
+        }
+        canvas {
+            border: 1px solid black;
+            background-color: white;
+            cursor: crosshair;
+        }
+        select {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+    <select id="seleccionAscii">
+        <option value="*">*</option>
+        <option value="#">#</option>
+        <option value="@">@</option>
+        <option value="&">&</option>
+        <option value="%">%</option>
+    </select>
+    <input type="color" value="#000000" id="colorPicker">
+    <canvas id="lienzoCuadriculado" width="500" height="500"></canvas>
+    <script>
+        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
+        const caracteresEnPosiciones = new Map();
+
+        function dibujarCuadricula() {
+            contexto.strokeStyle = "#ddd";
+            for (let x = 0; x <= lienzo.width; x += tamanoCuadricula) {
+                contexto.beginPath();
+                contexto.moveTo(x, 0);
+                contexto.lineTo(x, lienzo.height);
+                contexto.stroke();
+            }
+            for (let y = 0; y <= lienzo.height; y += tamanoCuadricula) {
+                contexto.beginPath();
+                contexto.moveTo(0, y);
+                contexto.lineTo(lienzo.width, y);
+                contexto.stroke();
+            }
+        }
+
+        function obtenerPosicionAjustada(posicion) {
+            return Math.floor(posicion / tamanoCuadricula) * tamanoCuadricula;
+        }
+
+        function dibujarAscii(x, y) {
+            const ascii = seleccionAscii.value;
+            const posicionClave = `${x},${y}`;
+            const caracterActual = caracteresEnPosiciones.get(posicionClave);
+
+            // Solo dibuja si la celda está vacía o si el carácter es diferente
+            if (!caracterActual || caracterActual !== ascii) {
+                // 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
+                contexto.font = `${tamanoCuadricula}px monospace`;
+                contexto.fillText(ascii, x, y + tamanoCuadricula - 5);
+                
+                // Almacena el nuevo carácter en el mapa
+                caracteresEnPosiciones.set(posicionClave, ascii);
+            }
+        }
+
+        lienzo.addEventListener("mousedown", (evento) => {
+            dibujando = true;
+            const x = obtenerPosicionAjustada(evento.offsetX);
+            const y = obtenerPosicionAjustada(evento.offsetY);
+            dibujarAscii(x, y);
+        });
+
+        lienzo.addEventListener("mousemove", (evento) => {
+            if (dibujando) {
+                const x = obtenerPosicionAjustada(evento.offsetX);
+                const y = obtenerPosicionAjustada(evento.offsetY);
+                dibujarAscii(x, y);
+            }
+        });
+
+        lienzo.addEventListener("mouseup", () => {
+            dibujando = false;
+        });
+
+        dibujarCuadricula();
+    </script>
+</body>
+</html>