Este artículo presenta principalmente un tutorial sobre el uso de lienzos en HTML5 para dibujar una cara sonriente. El uso de lienzo para el dibujo es una función básica en HTML5. Amigos que lo necesitan pueden referirse a él
Hoy, aprenderá una tecnología web llamada Canvas y su asociación con el modelo de objeto de documento (a menudo llamado DOM). Esta tecnología es muy poderosa porque permite a los desarrolladores web acceder y modificar elementos HTML mediante el uso de JavaScript.
Ahora puede que se pregunte por qué necesitamos usar JavaScript Dastic. En resumen, HTML y JavaScript son interdependientes, y algunos componentes HTML, como los elementos de lienzo, no pueden usarse solo de JavaScript. Después de todo, si no podemos dibujar en él, ¿qué pueden hacer el lienzo?
Para comprender mejor este concepto, intentaremos dibujar una cara sonriente simple con un proyecto de muestra. Comencemos.
comenzar
Primero cree un nuevo directorio para guardar los archivos de su proyecto y luego abra su editor de texto favorito o herramienta de desarrollo web. Una vez que haga esto, debe crear un índice vacío.html y un script.js vacío, después de lo cual continuaremos editando.
A continuación, modifiquemos el archivo index.html, que no implicará muchas cosas, porque la mayor parte del código en nuestro proyecto se escribirá en JavaScript. Lo que debemos hacer en HTML es crear un elemento de lona y un script de referencia. JS, que es bastante sencillo:
Código XML/HTML Copiar contenido al portapapeles