Trazar rayas
Para trazar rayas debemos usar el método moveTo(x,y) que determina el punto de partida del trazado. Luego, cada segmento siguiente utilizará el método lineTo(x,y).
A continuación podrá usar las propiedades lineWidth y strokeStyle para determinar el grosor y el color de la línea trazada.
Termine de trazar la línea con el método stroke().
Veamos un ejemplo:
<script>
var miCanvas=document.getElementById("trazos");
var miDibujo=miCanvas.getContext("2d");
miDibujo.moveTo(50, 100);
miDibujo.lineTo(200, 20);
miDibujo.lineTo(250, 140);
miDibujo.lineWidth=3;
miDibujo.strokeStyle="darkgreen";
miDibujo.stroke();
</script>
Y el resultado visual:
En las técnicas de dibujo, stroke indica el borde y fill el relleno.
Trazar bordes
La propiedad strokeStyle permite definir el color del borde. El método strokeRect() permite dibujar el borde de un rectángulo y el método stroke() permite dibujar un borde (para un círculo, en el ejemplo siguiente).
<canvas id="contorno" width="300" height="150"></canvas>
<script>
var miCanvas=document.getElementById("contorno");
var miDibujo=miCanvas.getContext("2d");
miDibujo.strokeStyle="#306";
miDibujo.strokeRect(10,10,200,100);
miDibujo.arc(220,90,40,0,2*Math.PI,true);
miDibujo.stroke();
</script>
Y el resultado visual obtenido:
Añadir texto
Puede insertar texto en el canvas con el método fillText(), para crear un texto de relleno, y strokeText(), para crear el borde del texto.
- La propiedad textBaseline permite definir la línea de base que prefiramos.
- La propiedad textAlign permite definir la alineación del texto.
- La propiedad font permite definir la tipografía de caracteres que queramos utilizar.
Este es el código de ejemplo:
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Texto con <canvas></title>
<meta charset="UTF-8" />
<style>
#texto {
border: solid 1px #000;
}
</style>
</head>
<body>
<canvas id="texto" width="300" height="150"></canvas>
<script>
var miCanvas=document.getElementById("texto");
var miTexto=miCanvas.getContext("2d");
miTexto.textBaseline="alphabetic";
miTexto.textAlign="center";
miTexto.font="3em Nueva";
miTexto.fillStyle="darkblue";
miTexto.fillText("Canvas",150,80);
</script>
</body>
</html>
Y la visualización:
Aplicar un degradado
Puede aplicar degradados lineales o radiales a sus objetos de dibujo.
En primer lugar, deberá crear un objeto degradado lineal (en este caso llamado dgdl) en su objeto de dibujo. Los parámetros de este objeto serán las coordenadas de inicio y de fin del degradado. En el siguiente ejemplo, las coordenadas del degradado lineal se han calculado respecto al rectángulo dibujado, para que sea vertical:
var dgdl = miDibujo.createLinearGradient(10, 85, 200, 85);
A continuación le aplicamos al degradado el método addColorStop() para indicar la posición de inicio del primer color, según una escala que va de 0 (inicio del degradado) a 1 (fin del degradado), así como el color que se usará al inicio. dgdl.addColorStop(0, "lightblue");. En el ejemplo, el primer color comienza al principio del degradado (0) y se trata de un azul claro (lightblue). Haremos lo mismo con el color del medio (0.5) y el del final (1).
Este es el código:
<script>
var miCanvas=document.getElementById("rectangulo");
var miDibujo=miCanvas.getContext("2d");
var dgdl = miDibujo.createLinearGradient(10, 85, 200, 85);
dgdl.addColorStop(0, "lightblue");
dgdl.addColorStop(0.5, "#fff");
dgdl.addColorStop(1, "darkblue");
miDibujo.fillStyle=dgdl;
miDibujo.rect(10,10,200,100);
miDibujo.fill();
</script>
Y el resultado obtenido:
Las transformaciones
El elemento canvas permite "transformar" los objetos dibujados con los métodos translate() (para desplazar un objeto), rotate(radius) (para aplicar una rotación a un objeto), y scale() (para redimensionar un objeto).
La manipulación de objetos
Usted puede proponer interactividad a sus usuarios con sus objetos dibujados, podría llegar incluso a crear juegos. Pero ahí nos estaríamos alejando de nuestro ámbito de aplicación, el diseño web, y nos estaríamos introduciendo en el mundo de los programadores puros en JavaScript. ¡Y eso es otra historia!
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario