canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro al rojo,

merops · #1 (**permalink**) 18/02/2015, 06:32

hola amigos
tengo un codigo que dibuja 250 cuadrados con 50 columnas y 5 filas, pero me gustaria que los cuadrados fueran mas grandes u ocuparan todo el espacio de pantalla, pero no entiendo del todo el codigo ¿me podriais ayudar?

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){

    var rojo=0;
    for(var fil=1;fil<=5;fil++) {
      for(var col=1;col<=50;col++) {  
        lienzo.fillStyle="rgb("+rojo+",0,0)";
        lienzo.fillRect(col*15,fil*15,14,14);
        rojo++;
      }
    }      

  }
  
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="750" height="300">

</canvas>
</body>
</html>

a ver si me podeis explicar el For , un saludo y gracias

merops · #2 (**permalink**) 19/02/2015, 07:57

¿no hay nadie que me pueda explicar que hace el bucle for?
por favor! quiero entenderlo, tengo que hacer un ejercicio similar y no lo comprendo,
gracias

monicapo · #3 (**permalink**) 20/02/2015, 04:14

Código:

lienzo.fillRect(col*15,fil*15,14,14);

Cambia los 14, por el tamaño que quieras. Sin pasarte de los 750x300 de la capa.
También deberás cambiar los dos primeros valores para cambiar la posicón donde se mostrará, ya que al cambiar el tamaño, cambia todo.

merops · #4 (**permalink**) 20/02/2015, 04:30

muchas gracias , no sabia para que eran los valores 14, 14, lo demas , mas o menos lo entiendo,
aprovechando y siguiendo con este tema de las cuadriculas
encontre este otro codigo, estuve probando y cambiando tamaños y datos para ver como funcionaba .

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dibujar Cuadrícula</title>
</head>
<body>
<h1>Dibujar Cuadrícula</h1>

<canvas height="2000px" width="1000px" id="micanvas">
Su navegador no soporta en elemento CANVAS</canvas>

<script>
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

for (var x=0; x<=1000; x=x+50){
        ctx.moveTo(x,0);
        ctx.lineTo(x,1000);
		ctx.fillStyle= "rgb(221,64,4)";
		}


for (var y=0; y<=1000; y=y+50){
        ctx.moveTo(0,y);
        ctx.lineTo(1000,y);
}

// Mueves el pencil y luego persistes con strok
ctx.strokeStyle = "#f00";
ctx.stroke();

</script>
</body>
</html>

mi pregunta seria ¿como hacer que los cuadrados se pinten de negro y rojo o con un degradado lineal con esos dos colores, intente hacerlo pero no me sale, y no e como se podria hacer , prove con ctx.fillStyle y el color pero no me pinta nada, y con createLinearGradient(startX, startY, endX, endY); pero sigo sin encajar el codigo, ¿me ayudarian? gracias
muchas gracias por ayudarme monicapo

gracias a todos

monicapo · #5 (**permalink**) 20/02/2015, 04:56

En el segundo ejercicio no estás pintando cuadrados.
Estás pintando líneas, que al cruzarse simulan cuadrados.
No puedes rellenarlos, porque no existen.

Prueba esto:

Código:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #CECECE;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgb(255,255,255)";
var grado=15;

for(x=0;x<16;x++) {
	ctx.fillStyle = 'rgb('+x*grado+',0,0)'; // Voy haciendo por cada cuadro un gradiente
	ctx.fillRect(x*50, 0, 50, 50); // Voy creando cuadros en una lina de 50x50
}

</script>

</body>
</html>

Y un tablero de ajedrez seria (por supuesto, el codigo es mejorable):

Código:

for(y=0;y<8;y++) {
		for(x=0;x<8;x++) {
			if(y%2==0) {
				if(x%2==0) {
					ctx.fillStyle = 'rgb(0,0,0)';
				} else {
					ctx.fillStyle = 'rgb(255,255,255)';
				}
			} else {
				if(x%2==0) {
					ctx.fillStyle = 'rgb(255,255,255)';
				} else {
					ctx.fillStyle = 'rgb(0,0,0)';
				}
			}
			ctx.fillRect(x*50, y*50, 50, 50);
		}
	}

merops · #6 (**permalink**) 20/02/2015, 05:27

otra pregunta :
¿como consigue que pase del 0 al 255 que es el rojo? no entiendo muy bien el rojo++ y luego el +rojo+ .

Cita:

lienzo.fillStyle="rgb("+rojo+",0,0)";

rojo++

es que los ++ no los entidendo muy bien
gracias

monicapo · #7 (**permalink**) 20/02/2015, 06:29

rojo tiene un valor inicial de 0 antes de las iteraciones.

En cada iteracion (cada for) la ultima instruccion es sumar 1 al valor de rojo.
rojo++ es lo mismo que rojo=rojo+1 Asi que en la siguiente iteracion rojo es igual 1, y en la siguiente 2, etc.

jp91 · #8 (**permalink**) 20/02/2015, 10:34

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>

marlanga · #9 (**permalink**) 20/02/2015, 11:00

Cansado de ver porno toda la tarde hice un par de experimentos de canvas a partir de este código, a ver lo que hacía la trigonometría al dibujar en un canvas.

y ésto es lo que salió:

Seno/coseno
http://jsfiddle.net/marlanga/hokjp530/1/

Tangente
http://jsfiddle.net/marlanga/hokjp530/2/

Seno al azul, coseno al verde, tangente al rojo.
http://jsfiddle.net/marlanga/hokjp530/3/

Mismo que el anterior, pero con un aumento de radianes grande.
http://jsfiddle.net/marlanga/hokjp530/4/

Tan inútil como divertido y curioso.

caricatos · #10 (**permalink**) 21/02/2015, 00:58

Hola:

Sobre el trazado del dibujo no creo que tengas problemas, y para la paleta de colores te paso un viejo artículo: Colores intermedios RGB... También tengo una pequeña aplicación para obtenerlos: Efecto fundido (fade)... En el formulario adjunto solo tienes que poner los colores en formato #rrggbb y el número de colores intermedios.

Saludos