Si está aprendiendo HTML y aprendiendo elementos más simples, es posible que se sienta un poco confundido por su simplicidad.
¿Es este realmente el lenguaje detrás de los increíbles sitios web interactivos que ha visto en el pasado? Tiene que haber algo más (además de CSS) que lleve HTML al siguiente nivel.
En muchos casos, el «algo más» es el lienzo. Canvas es una característica avanzada de HTML5 que nos permite dibujar imágenes e interactuar con los gráficos de la página, con algo de ayuda del lenguaje de programación JavaScript, el hermano de HTML.
En esta publicación, aprenderá los conceptos básicos del uso de un lienzo HTML, incluido cómo comenzar y cómo dibujar formas básicas. Sumerjámonos.
¿Qué es un lienzo HTML?
El lienzo HTML es una forma de crear ilustraciones y gráficos utilizando HTML y JavaScript. El lienzo se crea en HTML con
Para dibujar sobre lienzo, debe utilizar JavaScript. Si bien esto hace que el lienzo de aprendizaje sea menos accesible que otros conceptos de HTML (es necesario comprender la programación hasta cierto punto), abre innumerables posibilidades para el contenido animado e interactivo en una página.
Una vez que comprende el lienzo, se convierte en una poderosa herramienta para crear páginas web atractivas. Hay demasiado para cubrir en una sola publicación, así que sigamos con lo básico por ahora.
Cómo usar lienzo HTML
En esta sección, cubriremos los conceptos básicos del uso del lienzo, incluido el dibujo de líneas, formas e imágenes simples con JavaScript. Pero primero necesitamos crear HTML.
Configurar el lienzo HTML
Para agregar un lienzo a un sitio web, usamos
Comience colocando el siguiente lienzo en el cuerpo de su documento HTML:
<canvas id="test-canvas" width="300" height="200"></canvas>
los
Así es como se ve un elemento de lienzo vacío en una página. Para hacerlo visible, agregué un borde con estilo atributo.
ver la pluma Lienzo HTML: lienzo en blanco por HubSpot (@hubspot) en CódigoPen.
No es lo más emocionante, pero en este punto vamos a agregar nuestros dibujos usando JavaScript.
Tenga en cuenta que aunque solo puede establecer el tamaño del lienzo en píxeles dentro
Lienzo de referencia en JavaScript
Ahora que hemos colocado nuestro elemento de lienzo, podemos acceder a él a través de JavaScript para dibujar sobre él. Usaremos getElementById () método del documento al que apuntar
var canvas = document.getElementById("test-canvas");
A continuación, debemos crear un contexto de representación para el elemento de lienzo. El contexto de representación crea un objeto de dibujo que especifica cómo dibujar con el lienzo. En este caso, dibujaremos en dos dimensiones, por lo que agregaremos el siguiente código en la siguiente línea.
var context = canvas.getContext('2d');
Ahora estamos listos para comenzar a dibujar en nuestro lienzo.
Dibuja una línea
Lo primero que dibujaremos es también lo más sencillo: una línea recta. Sin embargo, para dibujar líneas (y otras formas en el lienzo), primero debemos entender cómo funcionan las coordenadas del lienzo.
Un lienzo es una cuadrícula de píxeles bidimensional. Cada píxel de la cuadrícula se puede especificar con un par de coordenadas X/Y. Por ejemplo, nuestro lienzo es de 300 x 200 píxeles. La esquina superior izquierda de nuestro lienzo tiene las coordenadas (0, 0) y la esquina inferior derecha tiene las coordenadas (300, 200).
Dibujé el mismo lienzo con dimensiones de 300 x 200 a continuación: pase el mouse sobre el área del lienzo para ver sus coordenadas actuales.
ver la pluma Lienzo HTML: coordenadas por HubSpot (@hubspot) en CódigoPen.
Para dibujar una línea con coordenadas usaremos tres métodos. Primero, mover a () establece dónde comienza la línea. Próximo, línea a () establece dónde termina la línea. Finalmente, pegar() el método realmente crea la línea.
ver la pluma Lienzo HTML: línea por HubSpot (@hubspot) en CódigoPen.
dibujar un rectángulo
Algunos fanáticos de la geometría pueden argumentar que la línea no es realmente una «forma». Muy bien, dibujemos un rectángulo. Para hacer esto, usamos sencillez() método. Este método toma cuatro parámetros: la coordenada X de la esquina superior izquierda, la coordenada Y de la esquina superior izquierda, el ancho del rectángulo en píxeles y la altura del rectángulo en píxeles.
context.rect(20, 20, 200, 150);
Luego sencillez()usaremos pegar() función de nuevo para dibujar un rectángulo.
ver la pluma Lienzo HTML: rectángulo 1 por HubSpot (@hubspot) en CódigoPen.
O, para llenar un rectángulo, use llenar() función en lugar de accidente cerebrovascular.
También podemos dibujar un rectángulo relleno con llenarRect () un método que toma los mismos parámetros que sencillez(). Esto creará un rectángulo sólido, que es negro por defecto. no tienes que usar pegar() o llenar() método aquí. Para cambiar el color del rectángulo, utilice estilo de relleno primero la propiedad como se muestra a continuación:
ver la pluma Lienzo HTML: rectángulo 2 por HubSpot (@hubspot) en CódigoPen.
Dibuja un circulo
A continuación, dibujemos un círculo. Para hacer esto en el lienzo, usamos arco() método. Para un arco, especifique las coordenadas X e Y del centro, el radio del arco, el ángulo inicial (en radianes) o el arco y el ángulo final del arco.
Como queremos que el arco termine donde comenzó, estableceremos el ángulo inicial en 0 radianes y el ángulo final en 2 pi radianes (si eso no tiene sentido, no se preocupe, no necesita saber cálculo para usar el lienzo!).
context.arc(100, 100, 50, 0, 2*Math.PI);
Entonces usa pegar() o llenar() dibuja un circulo. Esta vez vamos a usar llenar():
ver la pluma Lienzo HTML: círculo por HubSpot (@hubspot) en CódigoPen.
Dibujar formas con caminos
En el lienzo, la ruta es el límite de una forma, creada por varios métodos, dispuesta en una serie. Con las rutas, no está limitado a rectángulos y círculos básicos: puede crear prácticamente cualquier forma 2D.
Para dibujar una forma con rutas, use los siguientes métodos:
- ruta de inicio (): Indica que está creando una nueva forma.
- mover a (): Mueve la ruta al par de coordenadas especificado sin dibujar una línea.
- línea a (): Dibuja una línea desde el punto anterior de la ruta hasta el par de coordenadas especificado.
- arco(): crea una línea curva.
- cerrarRuta (): Señala que la forma actual ha terminado de dibujarse.
- llenar(): Rellena la ruta actual.
- pegar(): Dibuja líneas que conectan puntos en la ruta actual.
Cuando cree un camino, piense en él como si estuviera dibujando físicamente algo en papel. Cada función es como guiar físicamente el bolígrafo de un punto a otro.
Mire el lápiz a continuación para ver un ejemplo de lo que quiero decir: el camino comienza en la parte superior de la estrella y luego cada línea se crea con su propia línea a () función. Cuando termines, colorea la forma con llenar().
ver la pluma Lienzo HTML: rutas por HubSpot (@hubspot) en CódigoPen.
Gracias Punto tutorial por proporcionar el código para este ejemplo.
Dibujar texto
Crear texto en un lienzo HTML también es fácil. Podemos usar cualquiera Texto de relleno () método (para texto completo) o Trazo de texto () método (para texto que no está lleno). Ambos métodos requieren que especifique el texto y las coordenadas X e Y del área de texto.
context.fillText("This is filled-in text.", 10, 40);
context.strokeText("This is not filled in.", 10, 80);
También puede establecer la familia de fuentes, el tamaño y otros estilos de texto con fuente propiedad como se muestra a continuación:
ver la pluma Lienzo HTML: texto 1 por HubSpot (@hubspot) en CódigoPen.
Para agregar color al texto, use estilo de relleno o estilo de trazo bienes raíces:
ver la pluma Lienzo HTML: texto 2 por HubSpot (@hubspot) en CódigoPen.
Agregar degradados a las formas
Los degradados de color son otro efecto genial en el lienzo. Puede crear dos tipos de degradados: degradados lineales y degradados radiales.
Para crear un degradado lineal, utilice el crearGradienteLineal () y asignarlo al nuevo degradado cambiable. Este método toma las propiedades: las coordenadas X e Y del inicio del gradiente seguidas por las coordenadas X e Y del final del gradiente.
var gradient = context.createLinearGradient(0, 0, 300, 0);
Ajustar estos números cambia el ángulo del degradado dentro de la forma.
Luego agregamos dos paradas de color con agregarColorStop () método. Establecen el color inicial del degradado y el color final del degradado. Con este método, primero establecemos la posición del color en el degradado (valor entre 0 y 1) y luego el color. El primer color fluirá suavemente hacia el segundo color entre paradas.
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");
Finalmente, creamos nuestra forma y luego aplicamos ese degradado a la forma, configurando estilo de relleno nuestra forma a la nuestra degradado cambiable.
context.rect(20, 20, 200, 150);
context.fillStyle = gradient;
context.fill();
Así es como se ve nuestro degradado lineal en acción:
ver la pluma Lienzo HTML: degradado lineal por HubSpot (@hubspot) en CódigoPen.
Aquí hay una ilustración que muestra más claramente cómo estos parámetros afectan la apariencia del degradado:
Crear un degradado radial es similar a crear un degradado lineal. Para crear un degradado radial, utilice crearGradienteRadial () método. Los tres primeros parámetros son la ubicación X, la ubicación Y y el radio del círculo interior del degradado, y los siguientes tres parámetros son la ubicación X, la ubicación Y y el radio del círculo exterior.
var gradient = context.createRadialGradient(120, 95, 10, 120, 95, 100);
Luego agregamos los grados de color tal como lo hicimos con nuestro degradado lineal:
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "red");
Finalmente, dibuje una forma y asígnele un degradado radial.
context.rect(20, 20, 200, 150);
context.fillStyle = gradient;
context.fill();
Aquí está el lienzo final:
ver la pluma Lienzo HTML: degradado radial por HubSpot (@hubspot) en CódigoPen.
Añadir imágenes
Finalmente, coloquemos la imagen en nuestro lienzo. La ventaja de usar imágenes en un lienzo HTML en lugar de colocarlas en lugar de estándar la etiqueta es que puedes aplicar animaciones a tus imágenes y transformarlas en ilustraciones en el lienzo.
Para colocar la imagen, cree una variable llamada imagen usando getElementById () método, luego use dibujar la imagen () manera de ponerlo dentro del lienzo. dibujar la imagen () tiene tres parámetros obligatorios: el ID de la imagen en la página y las coordenadas X e Y de la esquina superior izquierda de la imagen. Opcionalmente, también puede incluir el ancho y el alto de la imagen como parámetros.
var image = document.getElementById("mountains");
context.drawImage(image, 0, 0, 300, 200);
Así es como se ve este código en combinación con HTML:
ver la pluma Lienzo HTML: imagen por HubSpot (@hubspot) en CódigoPen.
Mejora tu juego HTML con canvas.
Aprender el lienzo es como aprender los superpoderes de HTML. Después de dibujar líneas y círculos, puede ser difícil ver.
Pero con algunos trucos, JavaScript desbloquea infinitas posibilidades para una experiencia de navegación única y atractiva. La próxima vez que esté en un sitio web con gráficos interactivos o visualización, es probable que el lienzo HTML haga que todo funcione.
