Ejemplos en Canvas HTML5 – Lineas y Formas

Ejemplos en Canvas HTML5 – Lineas y Formas

Empezamos esta serie de ejemplos en Canvas HTML5 con una serie de funciones sencillas que nos ayudaran a dibujar rectángulos y comprender el funcionamiento de esta herramienta. A continuación veremos una serie de métodos que dibujan, contornean y rellenan figuras de rectángulo. Si aún no controlas demasiado HTML5 te recomendamos estos tutoriales interactivos.

IR A TUTORIAL

Canvas HTML5: Rectángulos

Existen tres métodos para dibujar rectangulos en canvas HTML5

Método y Descripción
1 fillRect(x,y,ancho,alto)
Este método dibuja un rectángulo relleno.
2 strokeRect(x,y,ancho,alto)
Este método dibuja el contorno de un rectángulo.
3 clearRect(x,y,ancho,alto)
Este método despeja un área específica y la deja totalmente transparente.

En estos métodos x e y especifican la posición en el canvas (posición relativa a su origen) desde la esquina superior izquierda del rectángulo y el ancho y el alto especifican las medidas del mismo.

Ejemplo:

El siguiente ejemplo es una demostración simple del uso de los métodos anteriormente mencionados para dibujar rectángulos.

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
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type="text/javascript">
         function dibujaForma(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('mycanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){
               
               // usa getContext para empezar a dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // Dibuja las formas
               ctx.fillRect(25,25,100,100);
               ctx.clearRect(45,45,60,60);
               ctx.strokeRect(50,50,50,50);
            } else {
               alert('Necesitas Safari o Firefox 1.5+ para ver esta demo.');
            }
         }
      </script>
   </head>
   <body id="test" onload="dibujaForma();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

Este código realizado a través de javascript mostrará el siguiente rectángulo:


Canvas HTML5: Formas

Los siguientes métodos serán necesarios para dibujar formas en canvas html5

Método y Descripción
1 beginPath()
Este método resetea la forma actual
2 moveTo(x, y)
Este método inicia o enlaza el contorno de la forma con el punto dado
3 closePath()
Este método indica que la forma actual está cerrada
4 fill()
Este método rellena la forma actual con el estilo de relleno actual
5 stroke()
Este método dibuja el contorno de la forma actual con el estilo de contorno actual
6 arc(x, y, radio, anguloInicio, anguloFinal, sentidoAntiHorario)
Enlaza un nuevo punto indicado con x e y con el último punto del contorno dibujado. Estos puntos se unirán bajo un arco descrito por la circunferencia de un círculo dado, empezando por el ángulo de inicio y acabando por el ángulo final. Este será recorrido por la dirección dada.

Ejemplo:

El siguiente ejemplo es una demostración sencilla de los métodos descritos anteriormente para dibujar una forma.

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
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type="text/javascript">
         function dibujaForma(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('mycanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){
               // usa getContext para empezar al dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // Dibuja Formas
               ctx.beginPath();
               ctx.arc(75,75,50,0,Math.PI*2,true);  // Circulo exterior
               
               ctx.moveTo(110,75);
               ctx.arc(75,75,35,0,Math.PI,false);   // Boca
               
               ctx.moveTo(65,65);
               ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo Izquierdo
               
               ctx.moveTo(95,65);
               ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo Derecho
               
               ctx.stroke();
            } else {
               alert('Necesitas Safari o Firefox 1.5+ para ver esta demo.');
            }
         }
      </script>
   </head>
   <body id="test" onload="dibujaForma();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

El ejemplo anterior dibujará la siguiente figura:

Canvas HTLM5: Lineas

Las lineas en canvas siguen los mismos métodos que las formas, así que nos podremos fijar en la tabla anterior para utilizar los métodos necesarios para los ejemplos de más abajo. Además de los métodos anteriores os mostramos otro sencillo método para dibujar lineas.

Método y Descripción
1 lineTo(x, y)
Este método dibuja desde el punto anterior hasta el punto dado por x e y, conectando ambos con una linea recta.

Las lineas dibujadas están sujetas a una clase de propiedades que definen los estilos de las mismas. Estas vienen fijadas por los siguientes atributos

Propiedad y Descripción
1 lineWidth [ = valor ]
Esta propiedad devuelve el ancho de linea actual.
2 lineCap [ = valor ]
Esta propiedad devuelve el estilo del extremo de linea actual. Los posibles estilos son butt, round y square
3 lineJoin [ = valor ]
Esta propiedad devuelve el estilo del enlace de linea actual. Los posibles estilos son bevel, round y miter
4 miterLimit [ = valor ]
Esta propiedad devuelve el ratio del angulo mínimo de linea actual.

Ejemplo

El ejemplo de a continuación muestra el uso de la propiedad lineWidth para dibujar lineas con diferente grosor.

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>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type="text/javascript">
         function dibujaForma(){
            // Toma el elemento canvas usando el DOM
            var canvas = document.getElementById('mycanvas');

            // Asegurate de no ejecutar el canvas en navegadores que no lo soporten
            if (canvas.getContext){
               // usa getContext para empezar al dibujar en el canvas
               var ctx = canvas.getContext('2d');

               // Dibuja Lineas
               for (i=0;i<10;i++){
                  ctx.lineWidth = 1+i;
                  ctx.beginPath();
                  ctx.moveTo(5+i*14,5);
                  ctx.lineTo(5+i*14,140);
                  ctx.stroke();
               }
            } else {
                  alert('Necesitas Safari o Firefox 1.5+ para ver esta demo.');
            }
         }
      </script>
   </head>
   <body id="test" onload="dibujaForma();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

El ejemplo anterior dibujará las siguientes lineas:

Más sobre Canvas HTML5

Si quieres aprender más sobre algunos consejos y trucos sobre Canvas HTML5 te recomendamos visitar la continuación de este tutorial donde trataremos como dibujar, redimensionar y recortar Imágenes en Canvas HTML5

IR A SEGUNDA PARTE

Related Posts

2 COMMENTS

Leave a reply