HTML5 Canvas
La etiqueta <canvas> define gráficos, como diagramas y otras imágenes; debe utilizar un script para dibujar los gráficos.
En el lienzo (canvas), dibuje un rectángulo rojo, un rectángulo con degradado, un rectángulo de color y algo de texto en color.
¿Qué es canvas?
El elemento <canvas> de HTML5 se utiliza para dibujar gráficos, lo cual se realiza mediante scripts (normalmente JavaScript).
La etiqueta <canvas> es solo un contenedor de gráficos; usted debe usar scripts para dibujar los gráficos.
Puede usar canvas de diversas maneras para dibujar trazados, cajas, círculos, caracteres y añadir imágenes.
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que admite el elemento <canvas>.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Crear un lienzo (Canvas)
Un lienzo en una página web es un marco rectangular, dibujado mediante el elemento <canvas>.
Nota:Por defecto, el elemento <canvas> no tiene borde ni contenido.
Un ejemplo sencillo de <canvas> es el siguiente:
Nota:La etiqueta generalmente necesita especificar un atributo id (a menudo referenciado en los scripts); los atributos width y height definen el tamaño del lienzo.
Consejo:Puede usar varios elementos <canvas> en una página HTML.
Use el atributo style para añadir un borde:
Ejemplo
Pruébelo »
Usar JavaScript para dibujar imágenes
El elemento canvas en sí no tiene capacidad de dibujo. Todo el trabajo de dibujo debe realizarse dentro de JavaScript:
Ejemplo
Pruébelo »
Explicación del ejemplo:
Primero, encuentre el elemento <canvas>:
Luego, cree el objeto context:
El objeto getContext("2d") es un objeto integrado de HTML5 que tiene varios métodos para dibujar rutas, rectángulos, círculos, caracteres y añadir imágenes.
Las siguientes dos líneas de código dibujan un rectángulo rojo:
ctx.fillRect(0,0,150,75);
La propiedad fillStyle puede ser un color CSS, un degradado o un patrón. El valor predeterminado de fillStyle es #000000 (negro).
fillRect(x,y,width,height) El método define el modo de relleno actual del rectángulo.
Coordenadas de Canvas
canvas es una cuadrícula bidimensional.
La coordenada de la esquina superior izquierda de canvas es (0,0).
El método fillRect anterior tiene parámetros (0,0,150,75).
Significa: dibujar un rectángulo de 150x75 en el lienzo, comenzando desde la esquina superior izquierda (0,0).
Ejemplo de coordenadas
Como se muestra en la siguiente figura, las coordenadas X e Y del lienzo se utilizan para ubicar los dibujos en el lienzo. Al mover el ratón sobre el rectángulo, se muestran las coordenadas de posición.
Canvas - Trazados
Para dibujar líneas en canvas, usaremos los siguientes dos métodos:
- moveTo(x,y) Define las coordenadas de inicio de la línea.
- lineTo(x,y) Define las coordenadas de fin de la línea.
Para dibujar líneas debemos usar el método de "tinta", como stroke().
Ejemplo
Defina las coordenadas de inicio (0,0) y las coordenadas de fin (200,100). Luego use el método stroke() para dibujar la línea:
JavaScript:
Pruébelo »
Para dibujar un círculo en canvas, usaremos el siguiente método:
arc(x,y,r,start,stop)
En realidad, al dibujar un círculo usamos el método de "tinta", como stroke() o fill().
Ejemplo
Use el método arc() para dibujar un círculo:
JavaScript:
Pruébelo »
Canvas - Texto
Las propiedades y métodos importantes para dibujar texto con canvas son los siguientes:
- font - define la fuente
- fillText(text,x,y) - Dibuja texto relleno en el canvas.
- strokeText(text,x,y) - Dibuja texto contorneado en el canvas.
Usar fillText():
Ejemplo
Use la fuente "Arial" para dibujar un texto de 30px de alto (relleno) en el lienzo:
JavaScript:
Pruébelo »
Usar strokeText():
Ejemplo
Use la fuente "Arial" para dibujar un texto de 30px de alto (contorneado) en el lienzo:
JavaScript:
Pruébelo »
Canvas - Degradado
Los degradados pueden rellenar rectángulos, círculos, líneas, texto, etc. Puede definir diferentes colores para varias formas.
A continuación hay dos formas diferentes de establecer degradados en canvas:
- createLinearGradient(x,y,x1,y1) - Crear un degradado lineal
- createRadialGradient(x,y,r,x1,y1,r1) - Crear un degradado radial/circular
Cuando usamos un objeto de degradado, debemos usar dos o más colores de parada.
El método addColorStop() especifica las paradas de color; los parámetros se describen mediante coordenadas y pueden ser de 0 a 1.
Para usar un degradado, establezca el valor de fillStyle o strokeStyle al degradado, y luego dibuje una forma, como un rectángulo, texto o una línea.
Usar createLinearGradient():
Ejemplo
Cree un degradado lineal. Rellene el rectángulo con el degradado:
JavaScript:
Pruébelo »
Usar createRadialGradient():
Ejemplo
Cree un degradado radial/circular. Rellene el rectángulo con el degradado:
JavaScript:
Pruébelo »
Canvas - Imágenes
Para colocar una imagen en el lienzo, use el siguiente método:
- drawImage(image,x,y)
Usar imágenes:
Ejemplo
Coloque una imagen en el lienzo:
JavaScript:
Pruébelo »
Manual de referencia de HTML Canvas
Los atributos completos de la etiqueta se pueden consultar en elManual de referencia de Canvas.
Etiqueta HTML <canvas>
| Tag | Descripción |
|---|---|
| <canvas> | El elemento canvas de HTML5 usa JavaScript para dibujar imágenes en una página web. |
Otras extensionesPara más contenido, consulte:Este artículo es suficiente para aprender HTML5 Canvas