Primeros pasos con html5-canvas

Detectar la posición del mouse 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) sea la esquina superior izquierda del lienzo HTML5. e.clientX y e.clientY obtendrán las posiciones del mouse en relación con la parte superior del documento, para cambiar esto para que se base en la parte superior del lienzo, restamos las posiciones izquierda y derecha de la lienzo 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 números enteros, ya que el rectángulo delimitador del lienzo puede no tener posiciones enteras.

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 tiene un tamaño predeterminado de 300 por 150 píxeles.

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

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

Esto dará como resultado que cada píxel se estire de manera desigual. El aspecto de píxel es 1:2. Cuando el lienzo se estire, el navegador utilizará el filtrado bilineal. Esto tiene el efecto de desenfocar los píxeles que están estirados.

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

Siguiendo con el estilo CSS anterior para que coincida con el tamaño de la pantalla, agregue el lienzo con el “ancho” y la “altura” establecidos en el mismo número de píxeles que define el estilo.

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

Cómo agregar el elemento Canvas Html5 a una página web

Lienzo Html5…

  • 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 mediante programación al lienzo.

Ejemplo: Cree un elemento Html5-Canvas utilizando el marcado Html5 y 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>

Lienzo fuera de la 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 pantalla, obtener un contexto 2D. Un lienzo fuera de 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);    

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

Hola mundo con lienzo HTML5

Un índice de las capacidades y usos de Html5 Canvas

Capacidades del lienzo

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

Los dibujos en lienzo se pueden diseñar ampliamente:

Usos del Lienzo

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

  • Aplicaciones de pintura / boceto,
  • Juegos interactivos de ritmo rápido,
  • Análisis de datos como tablas, gráficos,
  • Imágenes similares a Photoshop,
  • Publicidad tipo Flash y contenido web Flashy.

Canvas le permite manipular los colores de los componentes rojo, verde, azul y alfa de las imágenes. Esto permite que el lienzo manipule imágenes con resultados similares a los de Photoshop.

  • Vuelva a colorear cualquier parte de una imagen a nivel de píxel (si usa HSL, incluso puede volver a colorear una imagen mientras conserva la iluminación y la saturación importantes para que el resultado no se vea como si alguien hubiera puesto pintura en la imagen),
  • “Eliminar” el fondo alrededor de una persona/elemento en una imagen,
  • Detectar e inundar parte de una imagen (por ejemplo, cambiar el color de un pétalo de flor en el que el usuario hizo clic de verde a amarillo, ¡solo ese pétalo en el que se hizo clic!),
  • Haga deformación de perspectiva (por ejemplo, envuelva una imagen alrededor de la curva de una taza),
  • Examinar una imagen en busca de contenido (por ejemplo, reconocimiento facial),
  • Responder preguntas sobre una imagen: ¿Hay un auto 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 (Detección de bordes Sobel),
  • Combinar imágenes. Si la querida abuela Sue no pudo asistir a la reunión familiar, simplemente utilícela con “photoshop” en la imagen de la reunión. No me gusta el primo Phil, simplemente “elimínelo con Photoshop,
  • Reproducir un video / Tomar un cuadro de un video,
  • Exportar el contenido del lienzo como .jpg | Imagen .png (incluso puede opcionalmente recortar o anotar la imagen y exportar el resultado como una nueva imagen),

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

  • Una vez que se ha dibujado algo en el lienzo, ese dibujo existente no se puede mover ni editar. Vale la pena aclarar este concepto erróneo común de que los dibujos en lienzo se pueden mover: ¡Los dibujos en lienzo existentes no se pueden editar ni mover!
  • El lienzo se 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 al dibujar algo rápida y repetidamente y luego volver a dibujarlo en una nueva posición. Al igual que la televisión, este rediseño constante le da al ojo la ilusión de movimiento.

Rotar

El método rotate(r) del contexto 2D gira el lienzo en la cantidad especificada r 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);
};

Demostración 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 a 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;
};

Demostración en vivo en JSfiddle.