JavaScript - Problemas con creación de rectángulos en JS

   
Vista:
Imágen de perfil de Rodrigo Fernando

Problemas con creación de rectángulos en JS

Publicado por Rodrigo Fernando (2 intervenciones) el 30/11/2017 15:18:30
Hola amig@s:

Les cuento. Resulta que debo por tarea modificar una página web que genere rectángulos de forma automática con javascript. Logré que se crearan, que rellene con un color que esté en un arreglo y que haga otro en la posición donde se haga click en el mouse. El problema radica en dos cosas:

1) Si bien es cierto el color debe ser al azar, cuando la función elige un color al azar, no se queda con ese color, sino que muestra todos los colores al azar.

2) Debiera una vez hecho click, generar el rectángulo desde ese punto. Lo genera, pero no se detiene la generación automática anterior, ni mucho menos se logra ver bien el nuevo rectángulo.

Espero me puedan ayudar. Adjunto el código.

Saludos.

:8)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<canvas id="canvas" width="600" height="600"></canvas>
 
<p id="dimensiones"></p>
<p id="colores"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script>
 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
var colores = new Array();
colores = ['#8904F8','#F9CD08','#66F8A1','#E608F5','#980505','#000000', '#6C7777'];
 
 
function colorAleatorio (maxim) {
	var numi = Math.floor(Math.random() * (maxim - 0) - 1);
	return numi;
}
 
var tamano = 0;
var tamano2 = tamano * 2;
var posicion = 0;
setInterval(function () {
 
	ctx.fillStyle = (colores[colorAleatorio(colores.length)]);
	ctx.clearRect(0, 0, 600, 600);
	ctx.fillRect(posicion, 0, tamano, tamano2);
 
	tamano++;
	tamano2++;
	posicion++;
 
	if (tamano > 600){
		tamano = 0;
		tamano2 = 0;
		posicion = 0;
	}
 
	$("#dimensiones").text("El largo de la figura es = " + tamano + " y el alto es = " + tamano);
	$("#colores").text(colores[colorAleatorio(colores.length)]);
 
    //ctx.clearRect(0, 0, 600, 600);
    //ctx.fillRect(0, 0, tamano, tamano);
 
    //tamano++;
 
    //if (tamano > 400){
     //   tamano = 0;
	//	tamano2 = 0;
   // }
 
}, 30);
 
$("canvas").click(function (event) {
	var posX = event.offsetX;
	var posY = event.offsetY;
 
	ctx.clearRect(0, 0, 600, 600);
    ctx.fillRect(posX, posY, tamano, tamano);
 
    tamano++;
 
    if (tamano > 600) {
        tamano = 0;
		tamano2 = 0;
    }
 
});
 
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip

Problemas con creación de rectángulos en JS

Publicado por kip (105 intervenciones) el 30/11/2017 21:40:30
Hola, he modificado tu código organizandolo por funciones para de esa forma tener un mejor control sobre lo que ejecutas, lo he dejado muy sencillo para que puedas continuar con lo que desees añadirle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var globalInterval = 0;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var colores = ['#8904F8', '#F9CD08', '#66F8A1', '#E608F5', '#980505', '#000000', '#6C7777'];
 
var tamano = 0;
var tamano2 = tamano * 2;
var posX = 0;
var posY = 0;
var numi = 0;
 
function setColorAleatorio() {
    numi = Math.floor(Math.random() * (colores.length - 0) - 1);
    ctx.fillStyle = colores[numi];
}
 
function startAll() {
    setColorAleatorio();
    globalInterval = setInterval(generateFigure, 30);
}
 
function resetAll() {
    tamano = 0;
    tamano2 = 0;
    if (globalInterval !== 0) clearInterval(globalInterval);
}
 
function generateFigure() {
    ctx.clearRect(0, 0, 600, 600);
    ctx.fillRect(posX, posY, tamano, tamano2);
 
    tamano++;
    tamano2++;
    posX++;
 
    if (tamano > 600) {
        tamano = 0;
        tamano2 = 0;
        posicion = 0;
    }
 
    showDetails();
}
 
function showDetails() {
    $("#dimensiones").text("El largo de la figura es = " + tamano + " y el alto es = " + tamano);
    $("#colores").text(colores[numi]);
}
 
startAll();
 
$("canvas").click(function(event) {
    posX = event.offsetX;
    posY = event.offsetY;
    resetAll();
    startAll();
});

Pruebalo y nos cuentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Rodrigo Fernando

Problemas con creación de rectángulos en JS

Publicado por Rodrigo Fernando (2 intervenciones) el 01/12/2017 13:58:23
Lo acabo de probar. Funciona de maravilla. Gracias.

:8)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad