HTML5 Canvas

❮ AnteriorSiguiente ❯

---

El elemento HTML <canvas> se usa para dibujar gráficos en una página web.

El gráfico a la izquierda se crea con <canvas>. Muestra cuatro elementos: un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor y un texto multicolor.

---

¿Qué es HTML Canvas?

El elemento HTML <canvas> se usa para dibujar gráficos, sobre la marcha, a través de JavaScript.

El elemento <canvas> es solo un contenedor para gráficos. Debe usar JavaScript para dibujar realmente los gráficos.

Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, texto y agregar imágenes.

---

Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente el elemento <canvas>.

Element
<canvas>	4.0	9.0	2.0	3.1	9.0

---

Ejemplos de lienzo

Un lienzo es un área rectangular en una página HTML. Por defecto, un lienzo no tiene borde ni contenido.

El marcado se ve así:

<canvas id="myCanvas" width="200" height="100"></canvas>

Nota: especifique siempre un atributo de id. (A que se hace referencia en un script) y un atributo de ancho y alto para definir el tamaño del lienzo. Para agregar un borde, use el atributo de estilo.

Aquí hay un ejemplo de un lienzo básico vacío:

Ejemplo

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Pruebelo usted mismo »

---

www.micompraventa.net

---

Dibuja una línea

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Pruebelo usted mismo »

---

Dibuja un circulo

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Pruebelo usted mismo »

---

Dibuja un texto

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Pruebelo usted mismo »

---

Texto de trazo

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Pruebelo usted mismo »

---

Dibujar gradiente lineal

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Pruebelo usted mismo »

---

Dibujar gradiente circular

Ejemplo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradientvar grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradientctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Pruebelo usted mismo »

---

Dibujar Imagen

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

Pruebelo usted mismo »

---

HTML Canvas Tutorial

Para obtener más información sobre HTML <canvas>, visite nuestro tutorial HTML Canvas completo .

❮ AnteriorSiguiente ❯