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