Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro al rojo, en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2015, 06:32
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 7 años, 10 meses
Puntos: 0
canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro al rojo,

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
  #2 (permalink)  
Antiguo 19/02/2015, 07:57
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 7 años, 10 meses
Puntos: 0
Pregunta Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro


¿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
  #3 (permalink)  
Antiguo 20/02/2015, 04:14
 
Fecha de Ingreso: septiembre-2003
Mensajes: 140
Antigüedad: 19 años, 2 meses
Puntos: 2
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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.
  #4 (permalink)  
Antiguo 20/02/2015, 04:30
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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
  #5 (permalink)  
Antiguo 20/02/2015, 04:56
 
Fecha de Ingreso: septiembre-2003
Mensajes: 140
Antigüedad: 19 años, 2 meses
Puntos: 2
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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

Última edición por monicapo; 20/02/2015 a las 05:11
  #6 (permalink)  
Antiguo 20/02/2015, 05:27
 
Fecha de Ingreso: enero-2015
Mensajes: 33
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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
  #7 (permalink)  
Antiguo 20/02/2015, 06:29
 
Fecha de Ingreso: septiembre-2003
Mensajes: 140
Antigüedad: 19 años, 2 meses
Puntos: 2
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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.
  #8 (permalink)  
Antiguo 20/02/2015, 10:34
Avatar de jp91  
Fecha de Ingreso: mayo-2014
Mensajes: 94
Antigüedad: 8 años, 6 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>
__________________
OOoo Como hacer ooOO
juegos con Html5.
  #9 (permalink)  
Antiguo 20/02/2015, 11:00
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 11 años, 10 meses
Puntos: 206
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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.
  #10 (permalink)  
Antiguo 21/02/2015, 00:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 20 años, 7 meses
Puntos: 1284
Respuesta: canvas dibujar 250 cuadrados 50 columnas por 5 filas y que vayan del negro

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: canvas, columnas, dibujar, filas, html, negro, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:35.