HTML5 - Dibujando formas con canvas

La red

Dibujando rectángulos

fillRect(x, y, width, height)
Dibuja un rectángulo relleno. 

strokeRect(x, y, width, height)
Dibuja un contorno rectangular. 

clearRect(x, y, width, height)
Borra el área rectangular especificada, por lo que es totalmente transparente.

Cada una de estas tres funciones toma los mismos parámetros. x e y especifican la posición en el canvas (en relación con el origen) de la esquina superior izquierda del rectángulo. anchura y altura proporcionan el tamaño del rectángulo.

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

Ejemplo Forma Rectangular

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

El resultado de este ejemplo se muestra a continuación.


La función fillRect() dibuja un cuadrado grande negro 100 píxeles en cada lado. La función clearRect() y luego borra un cuadrado de 60x60 pixel del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro de la plaza despejado.

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo estilo de las formas prestados.

A diferencia de las funciones de trayectoria que veremos en la siguiente sección, las tres funciones rectángulo dibujan inmediatamente al canvas.

Dibujando trazados

beginPath()
Crea un nuevo camino. Una vez creado, comandos de dibujo futuras se dirigen a la ruta de acceso y usados ​​para construir el camino hacia arriba. 

closePath()
Cierra la ruta para que los comandos de dibujo futuras se dirigen de nuevo al contexto. 

stroke()
Dibuja la forma por retocar su contorno.

fill()
Dibuja una forma sólida llenando área de contenido de la ruta.

El primer paso para crear un camino es llamar a la beginPath(). Internamente, las rutas se almacenan como una lista de sub-rutas (líneas, arcos, etc) que en conjunto forman una figura. Cada vez que este método se llama, la lista se pone a cero y podemos empezar a dibujar nuevas formas.

Nota: Si la trayectoria actual está vacía, por ejemplo, inmediatamente después de llamar beginPath (), o en un lienzo de nueva creación, el primer comando de construcción de pistas siempre es tratado como un moveTo (), independientemente de lo que realmente es. Por esa razón, casi siempre tendrá que ajustar específicamente a su posición inicial después de reiniciar un camino.

El segundo paso es llamar a los métodos que realmente especifican los caminos para ser dibujado.

La tercero, es un paso opcional, es llamar closePath(). Este método intenta cerrar la forma dibujando una línea recta desde el punto actual al inicio. Si la forma ya se ha cerrado o no hay un solo punto en la lista, esta función no hace nada.

Nota: Cuando se llama a fill(), las formas abiertas se cierran automáticamente, asíque no tienes que llamar closePath (). Este no es el caso cuando se llama stroke().

Dibujando un triangulo

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

El resultado es el siguiente:

Moviendo el lápiz

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();
  }
}

Teniendo como resultado:

Nota: Para obtener más información sobre la función de arc(), consulte los Arc.

Puedes acceder a la segunda parte de este post a través del siguiente link: canvas II