20/02/2015, 10:34
|
 | | | Fecha de Ingreso: mayo-2014
Mensajes: 94
Antigüedad: 10 años, 7 meses Puntos: 11 | |
| Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro
Código:
<!DOCTYPE HTML>
<html>
<head>
<script >
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
/*dibujar 250 cuadrados que vayan del negro al rojo en 50 columnas y 5 filas */
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
/ME GUSTARIA QUE ME EXPLICARAIS ESTA PARTE DEL CODIGO
if (lienzo){ //comprueba si existe el lienzo
var rojo=0; // el valor inicial el cual equivale el negro rgb(0,0,0); El cual se va incrementando cada ciclo.
for(var fil=1;fil<=5;fil++) { //crea 5 filas (1 fila === 50) ya que el for interno se ejecuta completo.
for(var col=1;col<=50;col++) { // este for se ejecuta completamente (50 veces) (50*5=250)
lienzo.fillStyle="rgb("+rojo+",0,0)";//rellena el cuadro con color de estilo indicado
lienzo.fillRect(col*15,fil*15,14,14); //propiedades del cuadro(ancho, alto, col y fil se van incrementando(nueva posicion para cada cuadro Ejem: col=1; fil=1; col*15=15; fil*15=15; x=15 y=15; ))
rojo++; // variable se aumenta en 1 la veces que se repita el ciclo.
}
}
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="750" height="300">
</canvas>
</body>
</html>
|