<!------------------------- SINTAXIS JS ------------------------------>
<script>
//Arreglo con datos hexadecimales
let noHexadecimal = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
//Numero aleatorio
function noAleatorio(min, max) {
let posibilidades = max - min;
let n = Math.random() * posibilidades;
n = Math.floor(n);//redondea un número hacia el número entero anterior
return parseInt(min) + n;
}
//No en Hexadecimal de 6 digitos para colores
function colorAleatorio() {
let colorHex = "#";
for (i = 0; i < 6; i++) { //6 numeros hexadecimales aleatorios
arrayAux = noAleatorio(0, noHexadecimal.length);
valorHexAleatorio = noHexadecimal[arrayAux];
colorHex += valorHexAleatorio;
}
return colorHex;
}
//Crear una caja en un canvas
function crearCaja(pincel, x, y, ancho, alto, color, borde) {
pincel.fillStyle = color;//verde oscuro
pincel.fillRect(x, y, ancho, alto);
if (borde) {//si queremos que nustro cuadro tenga borde
pincel.strokeStyle = "black";//Color de borde
pincel.strokeRect(x, y, ancho, alto);
}
}
//Despues de HTML
function inicioJS() {
//Pizarra (llamamos al canvas por id)
let piazarra = document.getElementById("pizarra");
//Creamos pincel
let pincel = pizarra.getContext("2d");
//matriz de cuadrados de 30 x 30
for (let i = 0; i <= 300; i += 30) {
for (let j = 0; j <= 300; j += 30) {
crearCaja(pincel, i, j, 30, 30, colorAleatorio(), true);
}
}
}
</script>
</head>
<!------------------------- SINTAXIS HTML ------------------------------>
<body onload="inicioJS();">
<div><h1>Mosaico de cuadros de colores</h1></div>
<hr>
<!-- Creamos un canvas y le damos una id, ancho y alto -->
<canvas id="pizarra" width="300" height="300"></canvas>
<hr> arriba esta el canvas
</body>
