Comentario: Todos saben que no todos los navegadores actualmente admiten HTML5. Incluso los navegadores que admiten HTML5 pueden no admitir todas las nuevas características de HTML5. Se recomienda que use Firefox (el favorito de los desarrolladores) o el navegador Chrome. Todos mis ejemplos se desarrollan en base a Firefox.
A partir de hoy, comenzaremos una serie de cursos en el lienzo HTML5. Esta serie es mi resumen después de leer "HTML5 lienzo: interactividad nativa y animación para la web". Los amigos interesados pueden descargar libros originales en inglés para leer. Este libro nos muestra las poderosas funciones del lienzo al introducir el desarrollo del lienzo. Creo que es bastante bueno. He aprendido mucho conocimiento sobre el lienzo leyendo este libro. De hecho, no hay muchas API en el lienzo en sí. La clave es aprenderlos y usarlos activamente y aprender a crear resultados increíbles para la combinación de API. Y este libro es su mejor opción para aprender lienzo. Es una pena que todavía no tenga una versión china. Amigos con pobre inglés solo pueden esperar.Como todos sabemos, no todos los navegadores actualmente admiten HTML5, e incluso los navegadores que admiten HTML5 pueden no admitir necesariamente todas las nuevas características de HTML5. Entonces, todos deberían elegir un navegador relativamente nuevo como su entorno de depuración. Se recomienda que use Firefox (el favorito del desarrollador) o el navegador Chrome. Todos mis ejemplos se desarrollan en base a Firefox.
No presentaré el conocimiento básico relacionado con HTML5 aquí. Hay muchos tutoriales sobre HTML5 en Internet, por lo que puedo aprenderlo solo. Para aprender HTML5, debe tener una base mejor en JavaScript. Puedes ir al blog del tío Tom para aprender: De hecho, esta serie de cursos es bastante difícil. Si estudia bien más de 50 artículos, debe ser considerado un experto en JS.
Ahora comenzamos oficialmente nuestro curso de lienzo, el primer ejemplo: hola lienzo.
Primero, debe agregar la etiqueta de lienzo en el cuerpo, de la siguiente manera:
<Canvas>
Su navegador no admite el lienzo HTML5.
</able>
La parte de texto en el lienzo se mostrará cuando el navegador no admite el objeto Canvas.
La etiqueta de lienzo está definida. Cuando necesitamos operarlo a través de JS, se puede implementar a través de GetElementByID.
var thecanvas = document.getElementById (Canvasone); Ahora estamos acostumbrados a usar jQuery para desarrollar tareas, entonces, ¿cómo obtener el objeto Canvas usando jQuery?
var lienvas = $ ('#Canvasone'). Get (0); o var lienvas = $ ('#Canvasone') [0]; No sé que Get (0) y [0] no lo tengan. Si no usa el método get () o el subíndice [], su código JS no podrá operar el lienzo normalmente. Porque $ ('#Canvasone') obtiene un objeto jQuery, y lo que realmente queremos operar es un objeto HTML DOM. Hay un problema en el que el objeto jQuery se convierte en objeto DOM, y esta conversión se completa a través de get () o subíndice. Si necesita convertir un objeto DOM en un objeto jQuery, puede usar el método $ () para implementarlo. Mi amigo que no tiene claro al respecto tiene el único que va solo a Baidu, así que no entraré en profundidad aquí.
Para garantizar la robustez del código, necesitamos determinar si su navegador admite objetos de lienzo, que se pueden implementar a través del siguiente código.
if (! thecanvas ||! thecanvas.getContext) {
devolver;
}
Sin embargo, se recomienda que use la Biblioteca Modernizr.JS para completar este trabajo. Esta es una biblioteca JS HTML5 muy pasiva y proporciona muchos métodos útiles.
función canvassupport () {
regresar modernizr.canvas;
}
Canvas admite la representación 2D y se implementa a través del siguiente código:
context var = thecanvas.getContext (2d);
A continuación podemos dibujar la imagen en lienzo a través del objeto de contexto.
// Establecer el color del área
context.fillstyle = "#ffffa";
// Dibuja el área
context.fillrect (0, 0, 500, 300);
// Fuente establecida
context.font = "20px _sans";
// Establecer alineación vertical
context.textBaseline = "top";
// dibujar texto
context.fillText ("¡Hola mundo!", 195, 80);
// establecer el color del borde
context.strokestyle = "#000000";
// Dibuja el borde
context.strokerect (5, 5, 490, 290);
El dibujo de la imagen se describe a continuación. Debido a la descarga asincrónica de la imagen, para asegurarse de que cuando dibuje una imagen con lienzo, la imagen se ha descargado, utilizamos el siguiente método:
var helloworldImage = new image ();
Helloworldimage.src = "helloworld.gif";
helloworldimage.onload = function () {
context.DrawImage (Helloworldimage, 160, 130);
}
Cuando la imagen esté terminada, el evento de Onload se activará y la imagen se dibujará utilizando el objeto de contexto.
Todos descargan una demostración para ver el código completo. La dirección de descarga de demostración: html5canvas.helloworld.zip