html5-canvas Tutorial
Empezando con html5-canvas

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG

Cómo agregar el elemento de lienzo de HTML5 a una página web

Html5-Canvas ...

Es un elemento html5.
Es compatible con la mayoría de los navegadores modernos (Internet Explorer 9+).
Es un elemento visible que es transparente por defecto.
Tiene un ancho predeterminado de 300 px y una altura predeterminada de 150 px.
Requiere JavaScript porque todo el contenido debe agregarse programáticamente al Lienzo.

Ejemplo: cree un elemento Html5-Canvas utilizando tanto el marcado Html5 como JavaScript:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>

Tamaño y resolución del lienzo.

El tamaño de un lienzo es el área que ocupa en la página y está definido por las propiedades de ancho y alto de CSS.

canvas {
   width : 1000px;
   height : 1000px;
}

La resolución del lienzo define el número de píxeles que contiene. La resolución se establece configurando las propiedades de ancho y alto del elemento del lienzo. Si no se especifica el lienzo por defecto a 300 por 150 píxeles.

El siguiente lienzo utilizará el tamaño de CSS anterior, pero como no se especifica el width y el height la resolución será de 300 por 150.

<canvas id="my-canvas"></canvas>

Esto resultará en que cada píxel se estire de manera desigual. El aspecto del píxel es 1: 2. Cuando el lienzo se estire, el navegador utilizará filtrado bilineal. Esto tiene un efecto de desenfoque de píxeles que se estiran.

Para obtener los mejores resultados al utilizar el lienzo, asegúrese de que la resolución del lienzo coincida con el tamaño de visualización.

Siguiendo el estilo CSS anterior para que coincida con el tamaño de visualización, agregue el lienzo con el width y la height establecidos en el mismo número de píxeles que define el estilo.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>

Lienzo fuera de pantalla

Muchas veces, cuando trabaje con el lienzo, necesitará tener un lienzo para contener algunos datos de píxeles internos. Es fácil crear un lienzo fuera de la pantalla, obtener un contexto 2D. Un lienzo fuera de la pantalla también utilizará el hardware de gráficos disponible para renderizar.

El siguiente código simplemente crea un lienzo y lo llena con píxeles azules.

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

Muchas veces, el lienzo fuera de la pantalla se utilizará para muchas tareas, y es posible que tenga muchos lienzos. Para simplificar el uso del lienzo, puede adjuntar el contexto del lienzo al lienzo.

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);

Detectando la posición del ratón en el lienzo.

Este ejemplo mostrará cómo obtener la posición del mouse en relación con el lienzo, de modo que (0,0) será la esquina superior izquierda del HTML5 Canvas. e.clientX y e.clientY obtendrán las posiciones del mouse en relación con la parte superior del documento. Para cambiar esto y basarse en la parte superior del lienzo, restamos las posiciones left y right del canvas del cliente X e Y.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});

Ejemplo ejecutable

El uso de Math.round se debe a garantizar que las posiciones x,y sean enteros, ya que el rectángulo delimitador del lienzo puede no tener posiciones enteras.

Hola Mundo

HTML

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);

Resultado

Un índice de capacidades y usos de lienzo de HTML5

Capacidades del lienzo

Canvas le permite dibujar programáticamente en su página web:

Los dibujos en lienzo pueden ser estilizados extensamente:

Usos del lienzo

Los dibujos se pueden combinar y ubicar en cualquier lugar del lienzo para que se puedan usar para crear:

Aplicaciones de pintura / bosquejo,
Juegos interactivos de ritmo rápido,
Análisis de datos como tablas, gráficos,
Imágenes tipo Photoshop,
Flash-como publicidad y contenido web Flashy.

Canvas le permite manipular los colores de las imágenes de los componentes Rojo, Verde, Azul y Alfa. Esto permite que el lienzo manipule imágenes con resultados similares a Photoshop.

Vuelva a colorear cualquier parte de una imagen a nivel de píxeles (si usa HSL, puede incluso cambiar el color de una imagen mientras conserva la Iluminación y la Saturación importantes para que el resultado no se vea como si alguien hubiera pintado la imagen),
"Knockout" el fondo alrededor de una persona / elemento en una imagen,
Detecte y llene una parte de una imagen de la inundación (por ejemplo, cambie el color de un pétalo de flor con clic en el usuario de verde a amarillo, ¡solo ese pétalo con clic!),
Hacer distorsión de perspectiva (por ejemplo, envolver una imagen alrededor de la curva de una taza),
Examinar una imagen para el contenido (por ejemplo, reconocimiento facial),
Responda preguntas sobre una imagen: ¿hay un automóvil estacionado en esta imagen de mi lugar de estacionamiento?
Aplicar filtros de imagen estándar (escala de grises, sepia, etc.)
Aplique cualquier filtro de imagen exótico que pueda imaginar (Sobel Edge Detection),
Combina imágenes. Si la querida abuela Sue no pudo asistir a la reunión familiar, simplemente "photoshop" ella en la imagen de la reunión. No me gusta el primo Phil, solo "le saca el photoshop,
Reproduce un video / Toma un fotograma de un video,
Exportar el contenido del lienzo como .jpg | .png imagen (incluso puede recortar o anotar opcionalmente la imagen y exportar el resultado como una nueva imagen),

Acerca de mover y editar dibujos de lienzo (por ejemplo, para crear un juego de acción):

Después de dibujar algo en el lienzo, ese dibujo existente no se puede mover ni editar. Vale la pena aclarar esta idea errónea de que los dibujos de lienzo son móviles: ¡ los dibujos de lienzo existentes no se pueden editar ni mover!
Lienzo dibuja muy, muy rápido. Canvas puede dibujar cientos de imágenes, textos, líneas y curvas en una fracción de segundo. Utiliza la GPU cuando está disponible para acelerar el dibujo.
Canvas crea la ilusión de movimiento dibujando algo rápida y repetidamente y luego volviéndolo a dibujar en una nueva posición. Al igual que la televisión, este dibujo constante le da al ojo la ilusión de movimiento.

Girar

El método rotate(r) del contexto 2D rota el lienzo en la cantidad r especificada de radianes alrededor del origen.

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};

Demo en vivo en JSfiddle

Guardar lienzo en archivo de imagen

Puede guardar un lienzo en un archivo de imagen utilizando el método canvas.toDataURL() , que devuelve el URI de datos para los datos de imagen del lienzo.

El método puede tomar dos parámetros opcionales canvas.toDataURL(type, encoderOptions) : type es el formato de la imagen (si se omite, el valor predeterminado es image/png ); encoderOptions es un número entre 0 y 1 que indica la calidad de la imagen (el valor predeterminado es 0.92).

Aquí dibujamos un lienzo y adjuntamos el URI de datos del lienzo al enlace "Descargar en myImage.jpg".

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>

Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};

Demo en vivo en JSfiddle.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow