Introducción a HTML Canvas
En este artículo veremos un resumen en HTML Canvas. Como ya sabe, HTML es un lenguaje de marcado. Para presentar información al visitante, puede escribir HTML con qué texto mostrar en la pantalla y cómo se mostrará, es decir, tamaño de fuente, color, orientación, etc. Cuando se trata de agregar elementos visuales a una página, debe vincular e incrustar imágenes en la página, que se almacenan por separado del archivo HTML en su host.
Pero, ¿qué pasa si necesitas dibujar algo en la página?
¿Qué es el lienzo HTML?
El lienzo HTML (utilizado mediante etiqueta) es un elemento HTML que se utiliza para dibujar gráficos (líneas, barras, gráficos, etc.) en la pantalla de la computadora del usuario sobre la marcha. Sin embargo, el elemento de lienzo es solo un contenedor para la información, el dibujo se realiza a través de JavaScript. Es compatible con todos los navegadores web modernos que admiten HTML5 y pueden representar JavaScript. Crear un lienzo HTML es muy simple, y puede agregarlo a cualquier página HTML a través de lo siguiente.
Sintaxis:
Content here
Puede definir el tamaño del lienzo a través del atributo ancho y alto, también se puede definir un ID de elemento en la etiqueta que permite utilizar estilos CSS en el elemento del lienzo. El siguiente es un ejemplo de cómo puede dibujar un rectángulo usando el elemento Canvas:
Código:
#examplecanvas(border:2px solid green;)
Salida:
Ejemplos de dibujo de lienzo HTML
Ahora que ha visto cómo puede dibujar un rectángulo usando el elemento de lienzo, echemos un vistazo a algunos otros objetos que se pueden dibujar usando el elemento en la pantalla de salida del navegador.
1. Dibujando una línea en una página
moveTo (), stroke () y lineTo () son métodos que se pueden usar para dibujar líneas rectas en una página web. Como puede adivinar, moveTo () indica la posición del cursor en el espacio del elemento y lineTo () es el método que indica el punto final de la línea. El trazo () hace que la línea sea visible. Aquí está el código para su referencia:
Código:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Salida:
2. Dibujar un círculo en un lienzo HTML
A diferencia de los rectángulos, no existe un método particular en JavaScript para dibujar un círculo. En cambio, podemos usar el método arc (), que se usa para dibujar arcos para dibujar un círculo en el lienzo. Para obtener un lienzo con un círculo, puede usar lo siguiente:
Sintaxis:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Aquí hay un ejemplo de una página con un círculo:
Código:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
Salida:
3. Dibujar un texto en HTML Canvas
El texto también se puede dibujar en un lienzo HTML. Para obtener texto en su lienzo, puede demandar el método filltext (). El siguiente es un ejemplo de una página HTML que contiene texto dentro de un elemento de lienzo:
Código:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
Salida:
4. Dibujar un arco dentro de un lienzo HTML
Como discutimos con un círculo, hay un método llamado arc () que se usa para dibujar arcos dentro de HTML Canvas. Aquí está la sintaxis del método donde todo lo que tiene que hacer es agregar su variable:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
A continuación se muestra una página HTML que tiene un arco dentro de un elemento de lienzo:
Código:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
Salida:
5. Dibujo de degradado de color lineal o circular
Puede usar este método para crearLienearGradient () para dibujar gradientes de su elección dentro del elemento de lienzo. Con este método, deberá usar addColorStop () para denotar colores de degradado.
Sintaxis:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Aquí hay una página que tiene un gradiente lineal:
Código:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
Salida:
Del mismo modo, el método de dibujar gradientes circulares es createRadialGradient ().
Sintaxis:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Código:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
Salida:
Conclusión
Ahora que está familiarizado con lo que es el lienzo HTML y cómo se puede usar en las páginas web, debe sentirse más seguro de sus habilidades de diseño web. Si bien las imágenes se pueden usar en algunos casos, el beneficio del lienzo HTML es que es escalable y mucho más liviano en términos de tamaño y potencia de procesamiento.
Artículo recomendado
Esta es una guía para HTML Canvas. Aquí discutimos lo que es HTML Canvas y sus ejemplos junto con la implementación del código y la salida. También puede consultar nuestros artículos sugeridos para obtener más información:
- Los 16 principales atributos de estilo HTML
- HTML vs HTML5 | Top 9 comparaciones
- WebGL vs Canvas - principales diferencias
- Las 40 preguntas principales de la entrevista HTML
- Establecer un color de fondo en HTML con ejemplo