Elemento de lienzo - Canvas element

Este artículo trata sobre el elemento HTML. Para el elemento general en las interfaces de usuario, consulte Canvas (GUI) .
HTML
Comparaciones

El elemento lienzo es parte de HTML5 y permite la representación dinámica y mediante secuencias de comandos de formas 2D e imágenes de mapa de bits . Es un modelo de procedimiento de bajo nivel que actualiza un mapa de bits . HTML5 Canvas también ayuda a crear juegos en 2D.

Historia

Canvas fue introducido inicialmente por Apple para su uso en su propio componente Mac OS X WebKit en 2004, impulsando aplicaciones como los widgets Dashboard y el navegador Safari . Posteriormente, en 2005 fue adoptado en la versión 1.8 de los navegadores Gecko y Opera en 2006, y estandarizado por el Grupo de Trabajo de Tecnología de Aplicación de Hipertexto Web (WHATWG) sobre nuevas especificaciones propuestas para tecnologías web de próxima generación.

Uso

A canvasconsiste en una región dibujable definida en código HTML con atributos de alto y ancho . El código JavaScript puede acceder al área a través de un conjunto completo de funciones de dibujo similares a las de otras API 2D comunes, lo que permite gráficos generados dinámicamente. Algunos usos anticipados del lienzo incluyen la creación de gráficos, animaciones, juegos y composición de imágenes.

Ejemplo

El siguiente código crea un elemento Canvas en una página HTML: 

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Con JavaScript, puede dibujar en el lienzo: 

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Este código dibuja un rectángulo rojo en la pantalla.

Canvas API también proporciona save()y restore(), para guardar y restaurar todos los atributos del contexto del lienzo.

Tamaño del elemento de lienzo frente al tamaño de la superficie del dibujo

En realidad, un lienzo tiene dos tamaños: el tamaño del elemento en sí y el tamaño de la superficie de dibujo del elemento. La configuración de los atributos de ancho y alto del elemento establece ambos tamaños; Los atributos CSS afectan solo al tamaño del elemento y no a la superficie del dibujo.

De forma predeterminada, tanto el tamaño del elemento de lienzo como el tamaño de su superficie de dibujo es de 300 píxeles de pantalla de ancho y 150 píxeles de pantalla de alto. En la lista que se muestra en el ejemplo, que usa CSS para establecer el tamaño del elemento del lienzo, el tamaño del elemento es de 600 píxeles de ancho y 300 píxeles de alto, pero el tamaño de la superficie de dibujo permanece sin cambios en el valor predeterminado de 300 píxeles × 150. píxeles. Cuando el tamaño de un elemento de lienzo no coincide con el tamaño de su superficie de dibujo, el navegador escala la superficie de dibujo para que se ajuste al elemento (lo que puede resultar en efectos sorprendentes y no deseados).

Ejemplo de configuración del tamaño del elemento y del tamaño de la superficie de dibujo a diferentes valores: 

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

Lienzo frente a gráficos vectoriales escalables (SVG)

SVG es un estándar anterior para dibujar formas en navegadores. Sin embargo, a diferencia del lienzo, que se basa en ráster , SVG se basa en vectores , por lo que cada forma dibujada se recuerda como un objeto en un gráfico de escena o modelo de objeto de documento , que posteriormente se representa en un mapa de bits. Esto significa que si se cambian los atributos de un objeto SVG, el navegador puede volver a renderizar automáticamente la escena.

Los objetos de lienzo, por otro lado, se dibujan en modo inmediato . En el ejemplo de lienzo anterior, una vez que se dibuja el rectángulo, el sistema olvida el modelo del que se extrajo. Si se cambiara su posición, sería necesario volver a dibujar toda la escena, incluidos los objetos que podrían haber sido cubiertos por el rectángulo. Pero en el caso de SVG equivalente, uno podría simplemente cambiar los atributos de posición del rectángulo y el navegador determinaría cómo repintarlo. Hay bibliotecas de JavaScript adicionales que agregan capacidades de gráficos de escena al elemento de lienzo. También es posible pintar un lienzo en capas y luego recrear capas específicas.

Las imágenes SVG se representan en XML y se pueden crear y mantener escenas complejas con herramientas de edición XML.

El gráfico de escena SVG permite que los controladores de eventos se asocien con objetos, por lo que un rectángulo puede responder a un onClickevento. Para obtener la misma funcionalidad con el lienzo, uno debe hacer coincidir manualmente las coordenadas del clic del mouse con las coordenadas del rectángulo dibujado para determinar si se hizo clic en él.

Conceptualmente, el lienzo es una API de nivel inferior sobre la que se puede construir un motor que admita, por ejemplo, SVG. Hay bibliotecas de JavaScript que proporcionan implementaciones de SVG parciales utilizando lienzo para navegadores que no proporcionan SVG pero admiten lienzo, como los navegadores en Android 2.x. Sin embargo, normalmente este no es el caso, son estándares independientes. La situación es complicada porque hay bibliotecas de gráficos de escena para lienzo y SVG tiene algunas funciones de manipulación de mapas de bits.

Reacciones

En el momento de su introducción, el elemento lienzo se encontró con reacciones encontradas por parte de la comunidad de estándares web. Ha habido argumentos en contra de la decisión de Apple de crear un nuevo elemento propietario en lugar de admitir el estándar SVG . Hay otras preocupaciones sobre la sintaxis, como la ausencia de un espacio de nombres .

Propiedad intelectual sobre lienzo

El 14 de marzo de 2007, el desarrollador de WebKit Dave Hyatt reenvió un correo electrónico de la asesora principal de patentes de Apple, Helene Plotka Workman, en la que se indicaba que Apple se reservaba todos los derechos de propiedad intelectual relacionados con el borrador de trabajo de las aplicaciones web 1.0 de WHATWG, con fecha del 24 de marzo de 2005, sección 10.1, titulado “Gráficos: el lienzo de mapa de bits”, pero dejó la puerta abierta a la concesión de licencias de patentes en caso de que la especificación se transfiriera a un organismo de normalización con una política formal de patentes . Esto provocó un debate considerable entre los desarrolladores web y planteó preguntas sobre la falta de una política de patentes por parte del WHATWG en comparación con el apoyo explícito del World Wide Web Consortium (W3C) a las licencias libres de regalías. Apple luego dio a conocer las patentes bajo los términos de licencia de patentes libres de regalías del W3C. La divulgación significa que Apple debe proporcionar una licencia libre de regalías para la patente siempre que el elemento Canvas se convierta en parte de una futura recomendación del W3C creada por el grupo de trabajo HTML.

Preocupaciones sobre la privacidad

La toma de huellas dactilares de lienzo es una de las técnicas de toma de huellas dactilares del navegador para rastrear a los usuarios en línea que permiten a los sitios web identificar y rastrear a los visitantes utilizando el elemento de lienzo HTML5 . La técnica recibió una amplia cobertura mediática en 2014 después de que investigadores de la Universidad de Princeton y la Universidad de KU Leuven la describieran en su artículo The Web never olvida . Las preocupaciones de privacidad con respecto a la toma de huellas dactilares en el lienzo se centran en el hecho de que incluso eliminar las cookies y borrar la memoria caché no será suficiente para que los usuarios eviten el seguimiento en línea.

Soporte de navegador

El elemento es compatible con las versiones actuales de Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera y Microsoft Edge .

Ver también

Referencias

enlaces externos