Comentario: HTML5 presenta una nueva etiqueta, y el área representada por esta etiqueta es como un lienzo. Todos sus dibujos gráficos deben presentarse en este lienzo al final. Con esta etiqueta, la expresividad gráfica del navegador ha mejorado considerablemente. ¿Se sienten amenazados Flash y Silverlight?
1. <Canvas> EtiquetaHTML5 presenta una nueva etiqueta <Canvas>, el área representada por esta etiqueta es como un lienzo, y todos sus dibujos gráficos deben presentarse en este lienzo al final. Con esta etiqueta, la expresividad gráfica del navegador ha mejorado considerablemente. ¿Se sienten amenazados Flash y Silverlight?
Enlace de noticias: Google afirma que el navegador Chrome 7 se acelerará 60 veces más rápido
El uso de la etiqueta <Canvas> es muy simple, como sigue:
<Canvas>
Su navegador no admite la etiqueta de lienzo
</able>
No hay una gran diferencia entre la etiqueta <Canvas> y la etiqueta HTML ordinaria. Puede establecer su ancho y altura, y puede establecer su color de fondo, estilo de borde, etc. a través de CSS.
Puede encontrar más sobre la etiqueta <Canvas> aquí.
El contenido en el medio de la etiqueta es el contenido de reemplazo. Si el navegador del usuario no admite la etiqueta <Canvas>, se mostrará el contenido; Si el navegador del usuario admite la etiqueta <Canvas>, el contenido se ignorará.
El código <Canvas> anterior muestra el siguiente efecto:
Su navegador no admite la etiqueta de lienzo
Si está utilizando el navegador IE, solo puede ver un aviso; Si está utilizando el navegador Google Chrome o Firefox, puede ver un área de Red Square.
2. Contexto de representación
De hecho, no podemos hacer nada con la etiqueta <Canvas>. Los estudiantes que han jugado la programación de Windows saben que al dibujar en Windows, primero debe obtener un contexto de dispositivo DC, y al recurrir a la etiqueta <Vasvas>, también debe obtener un contexto de renderizado. Nuestros gráficos no se dibujan directamente en la pantalla, sino primero en el contexto (contexto), y luego se actualizan en la pantalla.
Off Topic: ¿Por qué necesita armar un concepto con un contexto tan complejo? Debido al objeto de contexto, podemos hacer que varios dispositivos gráficos se vean iguales en nuestros ojos. Solo necesitamos centrarnos en el dibujo, y dejar que el sistema operativo y el navegador se preocupen por otras tareas. Para decirlo sin rodeos, convierta todo tipo de concreto en abstracciones unificadas, reduciendo así nuestra carga.
Obtener el contexto es muy simple, solo necesita dos líneas de código de la siguiente manera:
var canvas = document.getElementById ('tutorial');
var ctx = canvas.getContext ('2d');
Primero, obtenga el objeto Canvas y luego llame al método GetContext del objeto Canvas. Este método solo puede pasar en el parámetro 2D en la actualidad. En el futuro cercano, puede admitir el parámetro 3D. Debe comprender lo que eso significa, esperemos con ansias.
El método GetContext devuelve un objeto CanvasRenderingContext2D, es decir, el objeto de contexto de representación. Puede encontrar más al respecto aquí, todos los cuales son algunos métodos de dibujo.
3. Soporte del navegador
Además de mostrar contenido alternativo en esos navegadores no compatibles, también podemos verificar si el navegador admite Canvas a través de scripts. El método es muy simple. Simplemente juzgue si existe la función GetContext. El código es el siguiente:
var canvas = document.getElementById ('tutorial');
if (canvas.getContext) {
alerta ("Soporte <Canvas> Etiqueta");
} demás {
alerta ("no compatible <Canvas> etiqueta");
}
4. Un pequeño ejemplo
A continuación, se demostrará un ejemplo de líneas en movimiento hacia arriba y hacia abajo utilizando la función de dibujo de HTML5. El código específico se dará en el contenido posterior.
Su navegador no admite la etiqueta <Canvas>, use el navegador Chrome o Firefox