El HTML <canvas> elemento se utiliza para dibujar gráficos en una página web.
El gráfico de la izquierda se crea con <canvas> . Se muestra cuatro elementos: un rectángulo rojo, un rectángulo gradiente, un rectángulo multicolor, y un texto multicolor.
¿Qué es HTML Canvas ?
El HTML <canvas> elemento se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (usually JavaScript) .
La <canvas> elemento es solamente un contenedor para gráficos. Se debe utilizar una secuencia de comandos para llamar la realidad de los gráficos.
Canvas tiene varios métodos para trazar caminos, cajas, círculos, texto y añadir imágenes.
El elemento canvas es parte de HTML5 y permite la representación dinámica, con scripts de formas 2D y las imágenes de mapa de bits. Es un nivel bajo, el modelo de procedimiento que actualiza un mapa de bits y no tiene un escenario gráfico incorporado.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Historia
Lienzo fue introducido inicialmente por Apple para su uso dentro de su propio componente X de Mac OS WebKit en 2004 aplicaciones mediante alimentación como widgets del Dashboard y el navegador Safari.
Más tarde, en 2005 se adoptó en la versión 1.8 de los navegadores Gecko y Opera en 2006, y estandarizado por el Grupo Web de hipertexto Aplicación de Tecnología de Trabajo (WHATWG) en las nuevas especificaciones propuestas para tecnologías web de última generación.
Uso
Lienzo consiste en una región estirable definido en el código HTML con atributos de anchura y altura. código JavaScript puede acceder a la zona a través de un conjunto completo de funciones de dibujo similares a los de otras API 2D comunes, lo que permite gráficos generados dinámicamente.
Algunos de los usos esperados de tela incluyen gráficos de construcción, animaciones, juegos y composición de la imagen.
Canvas ejemplos
Un canvas es un área rectangular en una página HTML. Por defecto, una canvas no tiene borde y ningún contenido.
El marcado se ve así:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Siempre especifique un atributo id (to be referred to in a script) , y una anchura y altura de atributos para definir el tamaño del canvas .
Para añadir un borde, utilice el style de atributos:
Básico Canvas Ejemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> Inténtalo tú mismo " Dibujo con JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); Inténtalo tú mismo " Dibuja una línea
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Inténtalo tú mismo " Dibuja un circulo
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Inténtalo tú mismo " Dibujar un texto
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); Inténtalo tú mismo " Texto accidente cerebrovascular
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); Inténtalo tú mismo " Dibuje Gradiente Lineal
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Inténtalo tú mismo " Dibuje circular Gradiente
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Inténtalo tú mismo " dibujar imagen
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); Inténtalo tú mismo " HTML Canvas Tutorial
Para aprender todo acerca de HTML <canvas> , Visita nuestra HTML Canvas Tutorial .