Entrada destacada

Como usar enums en Android, kotlin

el
0

Cómo dibujar múltiples rectángulos en canvas HTML5

el
Los rectángulos son las figuras mas "sencillas" de dibujar en el contexto de canvas.
  • Dibujo de rectángulos con relleno.
contexto.fillRect(10, 10, 100, 50);
  • Dibujo de contorno de rectángulos.
contexto.strokeRect(10, 10, 100, 50);

clearRect de alguna manera también dibuja un rectángulo, pero se usa para limpiar áreas en el canvas.

Las líneas anteriores dibujan un rectángulo iniciando en las coordenadas (10, 10), con un ancho de 100 y 50 de alto.


Para definir colores de relleno y contorno usamos las líneas 30 y 31. Los colores pueden ser definidos de varias maneras, en el siguiente ejemplo mostramos dos maneras.

 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
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Rectangulo en canvas</title>
  <style>
    div {
      position: absolute;
      top: 50px;
      left: 50px;
    }
    
    canvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div>
    <canvas id="myCanvas" width="300" height="300"></canvas>
  </div>
  <script>
    var canvas;
    var contexto;
    canvas = document.getElementById("myCanvas");
    if (canvas.getContext) {
      contexto = canvas.getContext("2d");
      contexto.strokeStyle = "red";
      contexto.fillStyle = "rgba(50, 50, 150, 0.5)";
      contexto.fillRect(10, 10, 200, 100);
      contexto.strokeRect(10, 10, 200, 100);
    }
  </script>
</body>

</html>

Crear la cantidad de rectángulos requeridos mediante campos input. 

Primeros agregaremos un campo input de tipo text con el id="contenido" y un botón con un evento onclick que llamara a una función en javascript en la cual obtendremos el valor del campo, para después dibujar cierta cantidad de rectángulos.

1
2
<input type="text" id="cantidad" placeholder="Cantidad">
<button onclick="obtenerValores()">Dibujar</button>

La función que obtiene el valor del input queda de la siguiente forma.

1
2
3
4
5
function obtenerValores(){
  var cantidad = document.getElementById("cantidad").value;
  contexto.clearRect(0, 0, 400, 300)
  draw(cantidad);
}

Función para dibujar n rectángulos.

1
2
3
4
5
6
7
8
9
function draw(cantidad) {
    x = 10;
    for (i = 1; i <= cantidad; i++) {
      contexto.fillStyle =
        "rgba(" + i * 10 + ", " + i * 40 + ", " + i * 40 + ", 0.5)";
      contexto.fillRect(x, 100, 20, 50 + i * 10);
      x += i + 26;
    }
}

Utilizando un bucle for iteramos hasta el valor ingresado, con cada iteracion dibujamos un rectángulo en distintas posiciones en el eje x empezando en 10 y dejando una separación de 6, el alto del rectángulo se va aumentando también cada ciclo, en adición cambiamos el color con cada itreacion para obtener una variación del color de cada rectángulo.

See the Pen Rectángulos canvas by Jesus Tepec (@JesusTepec) on CodePen.


Anterior Siguiente

Comentarios

Publicar un comentario