Comentario: ¿Qué es el lienzo? <Vas> es un nuevo elemento HTML que se define en HTML5. Este elemento generalmente se puede usar para dibujar gráficos, sintetizar imágenes, etc. en páginas HTML a través de JavaScript, y también se puede usar para hacer algunas animaciones. Por supuesto, actualmente html5
¿Qué es el lienzo?
<VaS> es un nuevo elemento HTML que se define en HTML5. Este elemento generalmente se puede usar para dibujar gráficos, sintetizar imágenes, etc. en páginas HTML a través de JavaScript, y también se puede usar para hacer algunas animaciones. Por supuesto, la especificación HTML5 todavía está en la etapa del draft, y puede tardar hasta 2010 en ser lanzado oficialmente, pero ahora muchos navegadores ya han admitido algunas especificaciones HTML5. Actualmente, los navegadores que admiten elementos de lona incluyen Firefox3+, Safari4, Chrome 2.0+, etc., por lo que al ejecutar los ejemplos en esta página, asegúrese de usar uno de los navegadores anteriores.
Aunque he tenido muchos tutoriales sobre lienzo en Mozilla, decidí grabar mi proceso de aprendizaje. Si cree que no entiendo lo suficiente, puede encontrar un enlace al tutorial de lienzo en el sitio web de Mozilla en los materiales de referencia.
Además, se pueden encontrar algunos ejemplos de lienzo interesantes aquí.
Empiece con el lienzo
Usar lienzo es simple. Al igual que usar otros elementos HTML, solo necesita agregar una etiqueta <Canvas> a la página:
<Canvas> </Canvas>
Por supuesto, esta es solo una creación simple de un objeto de lienzo y no realiza ninguna operación en él. En este momento, el elemento de lona no se ve diferente del elemento div, y no se puede ver nada en la página :)
Además, el tamaño del elemento de lona se puede especificar por los atributos de ancho y altura, que es algo similar al elemento IMG.
Core del lienzo: contexto
Como se mencionó anteriormente, puede operar objetos de lienzo a través de JavaScript para dibujar gráficos, imágenes de síntesis, etc. Estas operaciones no se realizan a través del objeto de lienzo en sí, sino que se realizan a través de un método del objeto de lienzo para getContext para obtener el contexto de operación de lona. En otras palabras, en el proceso de uso del objeto Canvas, tratamos el contexto del objeto Canvas, y el objeto de lienzo en sí mismo puede usarse para obtener información como el tamaño del objeto de lona.
Es muy simple obtener el contexto del objeto lienzo. Simplemente llame al método GetContext del elemento Canvas. Al llamar, debe pasar un parámetro de tipo de contexto. El único valor de tipo que se puede usar y se puede usar es 2D:
Firefox3.0.x la vergüenza
Aunque Firefox3.0.x admite elementos de lienzo, no se implementa completamente de acuerdo con la especificación. Los métodos Filltext y Medurettext en la especificación son reemplazados por varios métodos específicos de Firefox en Firefox3.0.x. Por lo tanto, cuando se usa lienzo en Firefox3.0.x, primero debe arreglar las diferencias entre estos métodos en diferentes navegadores.
El siguiente código se toma del proyecto Mozillabespin, que corrige la inconsistencia entre el objeto de contexto de lienzo en Firefox3.0.x y la especificación HTML5:
Nota: Hasta que la Opera 9.5, Opera no admite el Filltext del objeto Canvas y sus métodos y propiedades relacionadas en la especificación HTML5.
¡Hola, lienzo!
Después de una comprensión preliminar del lienzo, comenzamos a escribir nuestro primer programa de lienzo, otra rama del famoso Helloworld Hello, Canvas:
Ejecute el ejemplo, el área donde se encuentra el objeto Canvas muestra hola, mundo!, Que es exactamente la función de ctx.fillText (¡hola, mundo!, 20,20); en el código.
Filltext y propiedades relacionadas
El método Filltext se usa para mostrar texto en lienzo. Puede aceptar cuatro parámetros, el último es opcional:
VoidFillText (indomstringText, infloatx, infloaty, [opcional] infloatmaxwidth);
Donde MaxWidth representa el ancho máximo al mostrar el texto, que puede evitar que el texto se desborde. Sin embargo, en mis pruebas, descubrí que MaxWidth no es efectivo cuando se especifica MaxWidth en Firefox y Chomre.
Antes de usar el método Filltext, puede ajustar la fuente del texto configurando la propiedad de fuente del contexto. En el ejemplo anterior, utilicé 20Ptarial como la fuente del texto. Puede establecer diferentes valores usted mismo para ver el efecto específico.
Finalizar
Eso es todo por ahora. Escribiré esta serie mientras lee las especificaciones :)
Referencias
1. Lienzo HTML5, una nueva etapa para el lenguaje de secuencias de comandos, hred
2.
3. Chino de Canvastutorial, Mozilla
4. Inglés de Canvastutorial, Mozilla
5.Canvassupportinopera, ópera