This page was exported from Recursos para programadores [ https://eldesvandejose.com ]
Export date: Sat Dec 14 7:49:13 2019 / +0000 GMT

El canvas de HTML 5 (V). Relleno sólido.


Ya estamos bastante familiarizados con el uso de las figuras de trazo en los canvas. En este artículo vamos a ampliar los conocimientos que ya tenemos, para ver como podemos crear figuras sólidas, tanto con contorno como sin él.


En lo que veamos en este artículo emplearemos colores planos (no gradientes, ni texturas), para aprender a crear figuras con tonos sólidos o con el grado de transparencia que deseemos en cada caso. Así que, hala. Prepara el bote de pintura, y vamos a pintar.



FIGURAS RELLENAS


En este ejemplo vamos a ver como dibujar figuras en las que solo pondremos el relleno (sin contorno) y, para acabar, una figura (un texto) en la que pondremos contorno y relleno. El resultado final quedará como ves a continuación:



En realidad, los métodos empleados para posicionar coordenadas, mover el puntero de dibujo en el canvas, etc. son, exactamente, los mismos que ya conocemos. Lo único que tenemos que hacer es reemplazar la palabra stroke (que, en entornos de dibujo se refiere a trazos) por fill (rellenar). Así pues:


El método stroke() se sustituye por el método fill().


El método strokeRect() se sustituye por fillRect().


El método strokeText() se sustituye por fillText().


En lugar de la propiedad strokeStyle, para definir el color de un trazo, usamos fillStyle, que define el color de un relleno.


Incluso pueden combinarse stroke() y fill(), para obtener figuras con contorno y relleno, como es el caso del texto en nuestro ejemplo.


Todo esto puedes verlo en canvas_009.htm. Si te paras a mirarlo, aparte de la diferencia de emplear fill en lugar de stroke, lo demás todo te tiene que ser ya familiar.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilos_009.css">
</head>
<body>
<canvas id="canvas_1" height="300">
Tu navegador no soporta características esenciales de HTML 5.
</canvas>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script language='javascript'>
/* Referenciamos el canvas y, si se han referenciado correctmente,
creamos el correspondiente contexto.
Si el navegador soporta canvas, la referenciación no presenta problemas. */
var objeto_canvas_1 = $('#canvas_1');
if ($(objeto_canvas_1)[0].getContext) var contexto_canvas_1 = $(objeto_canvas_1)[0].getContext('2d');

/* En el canvas dibujamos un rectángulo sólido y un círculo semitransparente.
Debajo de estas figuras ponemos un triángulo relleno, sin trazo.
También añadimos un texto con trazo y con relleno.
Para dibujar en un canvas no nos referimos al propio canvas en sí, sino al objeto
contexto que hemos creado a partir de la referenciación del canvas. */
contexto_canvas_1.beginPath();
contexto_canvas_1.fillStyle = 'rgb(54, 203, 142)';
contexto_canvas_1.rect(10, 10, 200, 100);
contexto_canvas_1.fill();

/* Dibujamos un círculo completo, con cierta transparencia. */
/* x-y del centro (pix), radio (pix), ángulo origen (rad), ángulo final (rad) */
contexto_canvas_1.beginPath();
contexto_canvas_1.fillStyle = 'rgba(228, 25, 34, 0.6)';
contexto_canvas_1.arc(210, 60, 50, D2R(0), D2R(360));
contexto_canvas_1.fill();

/* Otra forma de dibujar un rectángulo relleno. */
contexto_canvas_1.beginPath();
contexto_canvas_1.fillStyle = 'rgb(49, 84, 173)';
contexto_canvas_1.fillRect(10, 120, 100, 100);

/* Dibujamos un triángulo relleno */
contexto_canvas_1.beginPath();
contexto_canvas_1.fillStyle = "#AE1414";
contexto_canvas_1.moveTo(230, 130);
contexto_canvas_1.lineTo(200, 250);
contexto_canvas_1.lineTo(280, 250);
contexto_canvas_1.lineTo(230, 130);
contexto_canvas_1.fill();

/* Dibujando texto relleno y con contorno */
contexto_canvas_1.beginPath(); // Inicializamos una ruta
contexto_canvas_1.lineCap = "butt"; // Trazo sin terminaciones
contexto_canvas_1.lineWidth = 4; // Trazo de 1 pixeles de ancho
contexto_canvas_1.strokeStyle = "#180EEA"; // Azul
contexto_canvas_1.fillStyle = "#F3E00B"; // Amarillo
contexto_canvas_1.font = "50px Verdana"; // Establecemos la tipografía
contexto_canvas_1.strokeText("TEXTO", 10, 270);
contexto_canvas_1.fillText("TEXTO", 10, 270);

/* Función para convertir grados a radianes. */
function D2R(deg){
var rad = (deg * Math.PI)/180;
return rad;
}
</script>
</body>
</html>

Quiero llamar tu atención en la línea resaltada, donde establecemos el color del círculo. Observa que le hemos puesto un alfa de 0.6, lo que le da cierta transparencia. Esto puede apreciarse gracias a que está solapando parcialmente a otra figura.


Como siempre, te dejo el código en este enlace. Nos vemos en el siguiente artículo de esta serie.

Post date: 2017-04-02 15:31:25
Post date GMT: 2017-04-02 15:31:25
Post modified date: 2017-04-02 15:31:25
Post modified date GMT: 2017-04-02 15:31:25
Powered by [ Universal Post Manager ] plugin. HTML saving format developed by gVectors Team www.gVectors.com