Tutorial detallado del elemento de lona HTML5 1

<Canvas> es un elemento nuevo en HTML5, que JavaScript puede utilizar para dibujar gráficos. Primero, <Canvas> se introdujo en el tablero Mac OS X de Apple, que se aplicó a Safari, y luego se basó en el navegador Gecko1.8, que también admite este nuevo elemento, como el navegador Firefox. Hoy, el elemento <Canvas> es parte de la especificación estándar HTML5.

Explicaremos qué puede hacer <Canvas>, a través de este tutorial, y puede usarse como punto de partida para su aplicación <Canvas>. Aprender <Canvas> Elementos no es difícil. Solo necesita tener el conocimiento básico de HTML y JavaScript, así como el navegador Firefox, la última versión de Safari u Opera9+, para que pueda ver todos los efectos de ejemplo.

Ahora comencemos con cómo definir el elemento <Canvas>.

<Canvas ID = tutorial Width = 150 Height = 150> </Canvas>

El elemento <Canvas> tiene solo dos atributos, ancho y altura, que son opcionales y se pueden controlar con DOM o CSS. Si no se establecen el ancho y la altura, el ancho predeterminado es de 300 píxeles y se usa 150 píxeles de altura. Aunque el tamaño de <Canvas> se puede controlar y ajustar a través de CSS, la imagen renderizada se escalará para adaptarse al diseño. Una vez que se descubre que los resultados de la representación parecen deformados, no tiene que confiar en CSS. Puede especificar los valores de ancho y altura que se muestran en <Canvas>. Al igual que las etiquetas HTML estándar, los atributos de identificación también se pueden definir, lo que puede hacer que la aplicación de script sea más conveniente. El elemento <Canvas> puede especificar su estilo (márgenes, bordes, fondos, etc.) como una imagen normal. Sin embargo, estos estilos no tienen ningún efecto sobre la imagen real generada por el lienzo.

Debido a que este elemento es relativamente nuevo, no todos los navegadores lo admiten, por lo que necesitamos proporcionar información de visualización alternativa para aquellos que no pueden navegar normalmente. Puede usar texto o imágenes:

 <CanvasID = stockgraphWidth = 150Height = 150>
 Su navegador no es compatible con el elemento <Canvas>.
 </able>
 <CanvASID = ClockWidth = 150Height = 150>
 <imgsrc = images.pngwidth = 150Height = 150alt = reemplazar imagen/
 </able>

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, se debe proporcionar contenido alternativo con un lugar para quedarse, por lo que es necesario finalizar la etiqueta (</able>) en la implementación de Mozilla. <Canvas id = foo ...> </able> es totalmente compatible con Safari y Mozilla - Safari simplemente ignora la etiqueta final. 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 pantalla de dibujo de tamaño fijo con uno o más contextos de representación que pueden controlar qué mostrar. Nos centramos en la representación 2D, que también es la única opción en la actualidad. Podemos agregar representación 3D basada en OpenGL ES en el futuro.

 varcanvas = document.getElementById ('tutorial');
 varctx = canvas.getContext ('2d');

Expliquemos el código anterior. La inicialización de <Canvas> está en blanco. Para dibujar un guión, primero debe representar el contexto. Se puede obtener a través del método getContext del objeto de elemento lienzo. Al mismo tiempo, también se obtienen algunas funciones que deben solicitarse para el dibujo. getContext () acepta un valor que describe su tipo como argumento. La primera línea anterior obtiene el nodo DOM del objeto Canvas a través del método GetElementByID. Luego use su método GetContext para obtener su contexto de operación de dibujo. Además, también podemos usar scripts para determinar el soporte del navegador para <Canvas>, es decir, para determinar si el GetContext existe.

 varcanvas = document.getElementById ('tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 // DrawingCodehere
 }demás{
 // Canvas-UnsupportedCodehere
 }

Comenzamos con la plantilla más simple a continuación, puede copiarla en su copia de seguridad local.

 <html>
 <Evista>
 <title> Canvastutorial </title>
 <scriptType = text/javaScript>
 functionDraw () {
 varcanvas = document.getElementById ('tutorial');
 if (canvas.getContext) {
 varctx = canvas.getContext ('2d');
 }
 }
 </script>
 <styletype = text/css>
 lienzo {border: 1pxsolidblack;}
 </style>
 </ablo>
 <BodyOnload = Draw ();>
 <CanvasId = tutorialWidth = 150Height = 150> </Canvas>
 </body>
 </html>

Cuidadosamente encontrará una función llamada Draw, que se ejecutará una vez después de cargar la página (configurando la propiedad de ENCARGA 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, 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>
 <Evista>
 <scriptType = Application/X-JavaScript>
 functionDraw () {
 varcanvas = document.getElementById (Canvas);
 if (canvas.getContext) {
 varctx = 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>
 </ablo>
 <BodyOnload = Draw ();>
 <CanvasID = CanvasWidth = 150Height = 150> </ Canvas>
 </body>
 </html>

Puede copiar el código anterior al archivo HTML para ejecutar, representaciones: