<VAnvas> es un nuevo elemento HTML que puede ser utilizado por el lenguaje de script (generalmente JavaScript) para dibujar gráficos. Por ejemplo, se puede usar para dibujar imágenes, sintetizar imágenes o hacer animaciones simples (y no tan simples). La imagen de la derecha muestra algunos ejemplos de aplicaciones de <Canvas>, y veremos su implementación en este tutorial.
<Canvas> se introdujo por primera vez en el tablero Mac OS X de Apple y luego se aplicó a Safari. Los navegadores basados en Gecko1.8, como Firefox 1.5, también admiten este nuevo elemento. El elemento <Canvas> es parte de Whatwg Web Applications 1.0, que es conocido por todos, la especificación estándar HTML 5.
En este tutorial, intentaré decirle cómo usar el elemento <Canvas> en su propia página web. Los ejemplos proporcionados deberían darle algunos conceptos claros, a saber, lo que puede hacer con <Canvas>. Estos ejemplos también pueden servir como punto de partida para su aplicación <Canvas>.
Antes de comenzar a usar
Usar el elemento <Canvas> no es difícil, siempre que tenga el conocimiento básico de HTML y JavaScript.
Como se mencionó anteriormente, no todos los navegadores modernos admiten elementos <Vas>, por lo que necesita Firefox 1.5 o posterior, u otros navegadores basados en gecko como Opera 9, o una versión reciente de Safari para ver las acciones de todos los ejemplos.
Elemento <Canvas>
Comencemos este tutorial mirando el elemento <Canvas> en sí.
Comencemos con la definición del elemento <Canvas>.
<Canvas ID = tutorial Width = 150 Height = 150> </Canvas>
Esto se parece mucho al elemento <img>, la única diferencia es que no tiene los atributos SRC y ALT. <Canvas> se parece mucho al <IMG>, la única diferencia es que no tiene los atributos SRC y ALT. El elemento <Canvas> tiene solo dos atributos: ancho y altura . Estos son opcionales y también se pueden configurar utilizando propiedades DOM o reglas CSS. Cuando no se especifican atributos de ancho y altura, el lienzo inicialmente tendrá 300 píxeles de ancho y 150 píxeles de alto . El elemento puede ser dimensionado arbitrariamente por CSS, pero durante la representación, la imagen se escala para que se ajuste a su tamaño de diseño. (if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with css.) Although the size of the canvas can be resized through css, the rendering image will scale to adapt to the layout (if you find that the rendering results look deformed, you don't have to rely on css, you can try to explicitly specify the width and height attribute valores del lienzo).
El atributo ID no es específico para el elemento <Canvas>, pero es uno de los atributos HTML predeterminados que se pueden aplicar a (casi) cada elemento HTML (como la clase, por ejemplo). Siempre es una buena idea proporcionar una identificación porque esto hace que sea mucho más fácil identificarlo en nuestro guión.
El atributo de identificación no es exclusivo de <Canvas>. Al igual que la etiqueta HTML estándar, cualquier elemento HTML puede especificar su valor de ID. En general, es una buena idea especificar una identificación para un elemento, lo que facilita la aplicación en los scripts.
El elemento <Canvas> se puede diseñar como cualquier imagen normal (margen, borde, fondo, etc.). Sin embargo, estas reglas no afectan el dibujo real en el lienzo. Veremos cómo se hace esto más adelante en este tutorial. Cuando no se aplican reglas de estilo al lienzo, inicialmente será completamente transparente. El elemento <Canvas> se puede diseñar como cualquier imagen normal (margen, borde, fondo, etc.). Sin embargo, estas reglas no afectan el dibujo real en el lienzo. Veremos cómo se hace esto más adelante en este tutorial. Cuando no se aplican reglas de estilo al lienzo, inicialmente será completamente transparente. El elemento <Canvas> se puede diseñar como cualquier imagen normal (margen, borde, fondo, etc.) es como si fuera una imagen normal. Sin embargo, estos estilos no tienen ningún efecto sobre la imagen real generada por el lienzo. A continuación veremos cómo aplicar estilos. Si no especifica un estilo, el lienzo es completamente transparente de forma predeterminada.
Debido a que el elemento <Canvas> todavía es relativamente nuevo y no se implementa en algunos navegadores (como Firefox 1.0 e Internet Explorer), necesitamos un medio para proporcionar contenido de respaldo cuando un navegador no admite el elemento.
Debido a que <Canvas> es relativamente nuevo, algunos navegadores no lo implementan, como Firefox 1.0 e Internet Explorer, necesitamos proporcionar contenido de visualización alternativo para los navegadores que no admiten el lienzo.
Afortunadamente, esto es muy sencillo: solo proporcionamos contenido alternativo dentro del elemento lienzo. Los navegadores que no lo admiten ignorarán el elemento por completo y representarán el contenido respaldo, otros simplemente harán que el lienzo normalmente.
Por ejemplo, podríamos proporcionar una descripción de texto del contenido de lienzo o proporcionar una imagen estática del contenido renderizado dinámicamente. Esto puede verse algo así:
Solo necesitamos insertar contenido sustituto directamente en el elemento de lona. Los navegadores que no admiten el lienzo ignorarán los elementos de lona y representarán directamente el contenido alternativo, mientras que los navegadores compatibles harán normalmente el lienzo. Por ejemplo, podemos completar algún texto o imágenes en lienzo como contenido alternativo:
<Canvas id = stockgraph ancho = 150 altura = 150> Precio actual de las acciones: $ 3.15 +0.15 </ Canvas> <Canvas ID = Clock Width = 150 Height = 150> <img src = Images/clock.png Width = 150 Height = 150/> </Canvas>
En la implementación de Safari de Apple, <VAnvas> es un elemento implementado de la misma manera <img> es; No tiene una etiqueta final. Sin embargo, para que <Canvas> tenga un uso generalizado en la web, se deben proporcionar algunas instalaciones para contenido respaldo. Por lo tanto, la implementación de Mozilla requiere una etiqueta final (</ Canvas>).
En Apple Safari, la implementación de <Canvas> es muy similar a <img>, y no tiene una etiqueta final. Sin embargo, para que <Canvas> sea ampliamente aplicable en el mundo web, es necesario proporcionar un lugar para el contenido alternativo, por lo que es necesario terminar la etiqueta (</Canvas>) en la implementación de Mozilla.
Si no se necesita contenido de retroceso, un simple <Canvas id = foo ...> </levas> será completamente compatible con Safari y Mozilla - Safari simplemente ignorará la etiqueta final.
Si no hay sustituto, <Canvas id = foo ...> </levas> es completamente compatible con Safari y Mozilla, Safari simplemente ignora la etiqueta final.
Si se desea contenido de retroceso, se deben emplear algunos trucos CSS para enmascarar el contenido de retroceso de Safari (que debería hacer solo el lienzo), y también para enmascarar los trucos de CSS de IE (que deberían obtener el contenido respaldo).
Si hay contenido alternativo, puede usar algunos trucos de CSS para ocultar contenido alternativo para y solo para Safari, porque ese contenido alternativo debe mostrarse en IE pero no en Safari.
<VaS> Crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de representación , que se utilizan para crear y manipular el contenido que se muestra. Nos centraremos en el contexto de renderizado 2D, que es el único contexto de renderizado actualmente definido. En el futuro, otros contextos pueden proporcionar diferentes tipos de representación; Por ejemplo, es probable que se agregue un contexto 3D basado en OpenGL ES.
La pantalla de dibujo de tamaño fijo creada por <VAnvas> abre uno o más contextos de representación , a través de los cuales podemos controlar qué mostrar. Nos centramos en la representación 2D, que también es la única opción en la actualidad, y puede agregar un contexto 3D basado en OpenGL ES en el futuro.
El <Canvas> está inicialmente en blanco, y para mostrar algo que un script primero necesita para acceder al contexto de renderizado y dibujar en él. El elemento Canvas tiene un método DOM llamado GetContext, utilizado para obtener el contexto de renderizado y sus funciones de dibujo. getContext () toma un parámetro, el tipo de contexto.
La inicialización de <Canvas> está en blanco. Para dibujar un script sobre él, primero requiere su contexto de renderizado. Se puede obtener a través del método getContext del objeto de elemento lienzo. Al mismo tiempo, se obtienen algunas funciones para el dibujo. getContext () acepta un valor que describe su tipo como argumento.
var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext ('2d');En la primera línea recuperamos el nodo DOM de lienzo utilizando el método GetLementByID. Luego podemos acceder al contexto de dibujo utilizando el método GetContext.
La primera línea anterior obtiene el nodo DOM del objeto Canvas a través del método GetElementByID. Luego, el contexto de operación de dibujo se obtiene a través de su método GetContext.
El contenido de retroceso se muestra en navegadores que no admiten <Canvas>; Los scripts también pueden verificar el soporte cuando se ejecutan. Esto se puede hacer fácilmente probando el método GetContext. Nuestro fragmento de código de arriba se convierte en algo como esto:
Además de mostrar contenido alternativo en los navegadores no compatibles, también puede verificar si el navegador admite el lienzo a través de scripts. El método es muy simple, solo juzga si el GetContext existe.
var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = Canvas.getContext ('2d'); // Código de dibujo aquí} else {// Código Canvas-Unsupported aquí}Aquí hay una plantilla minimalista, que usaremos como punto de partida para ejemplos posteriores. Puede descargar este archivo para trabajar en su sistema.
Comenzaremos con la siguiente plantilla de código más simple (requerida para ejemplos posteriores), y puede descargar el archivo que se utilizará localmente.
<html> <fead> <title> Tutorial de Canvas </title> <script type = text/javaScript> function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </script> <style type = text/css> Canvas {border: 1px sólido negro; } </style> </head> <body onload = draw ();> <Canvas id = tutorial Width = 150 Height = 150> </ Canvas> </body> </html>Si observa el script que verá que he hecho una función llamada sorteo, que se ejecutará una vez que la página finalice la carga (a través del atributo de información en la etiqueta del cuerpo). Esta función también podría haberse llamado desde un setTimeout, setInterval o cualquier otra función de controlador de eventos al mismo tiempo que la página se ha cargado primero.
Si tiene cuidado, encontrará que he preparado una función llamada Draw, que se ejecutará una vez que se cargue la página (configurando la propiedad de Onload de la etiqueta del cuerpo) y, por supuesto, también se puede llamar en SetTimeout, SetInterval u otras funciones de manejo de eventos.
Para comenzar, aquí hay un ejemplo simple que dibuja dos rectángulos de intersección, uno de los cuales tiene transparencia alfa. Exploraremos cómo funciona esto en más detalles en ejemplos posteriores.
Para comenzar, tomemos un aspecto simple: dibuje dos rectángulos entrelazados, uno de los cuales tiene un efecto alfa transparente. Le daremos una mirada detallada de cómo funciona en el siguiente ejemplo.
<html> <fead> <script type = application/x-javaScript> function draw () {var canvas = document.getElementById (Canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); ctx.fillstyle = RGB (200,0,0); ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0.5); ctx.fillrect (30, 30, 55, 50); }} </script> </head> <body onload = draw ();> <Canvas id = Canvas width = 150 Height = 150> </Canvas> </body> </html>