In diesem Artikel wird hauptsächlich ein Tutorial über die Verwendung von Leinwand in HTML5 vorgestellt, um ein lächelndes Gesicht zu zeichnen. Die Verwendung von Leinwand zum Zeichnen ist eine grundlegende Funktion in HTML5. Freunde, die es brauchen, können sich darauf beziehen
Heute lernen Sie eine Web -Technologie namens Canvas und ihre Assoziation mit dem Dokumentobjektmodell (oft als DOM bezeichnet). Diese Technologie ist sehr leistungsfähig, da Webentwickler auf HTML -Elemente mithilfe von JavaScript zugreifen und diese ändern können.
Jetzt fragen Sie sich vielleicht, warum wir JavaScript drastisch verwenden müssen. Kurz gesagt, HTML und JavaScript sind voneinander abhängig, und einige HTML -Komponenten, wie z. B. Leinwandelemente, können nicht allein aus JavaScript verwendet werden. Wenn wir doch nicht darauf zurückgreifen können, was können Leinwand dann tun?
Um dieses Konzept besser zu verstehen, werden wir versuchen, ein einfaches Smiley -Gesicht mit einem Beispielprojekt zu zeichnen. Fangen wir an.
Start
Erstellen Sie zunächst ein neues Verzeichnis, um Ihre Projektdateien zu speichern, und öffnen Sie dann Ihr bevorzugter Texteditor oder Webentwicklungswerkzeug. Sobald Sie dies tun, sollten Sie einen leeren Index.html und ein leeres Skript.js erstellen, wonach wir weiterhin bearbeiten.
Lassen Sie uns als nächstes die Index.html -Datei ändern, die nicht viele Dinge beinhaltet, da der größte Teil des Code in unserem Projekt in JavaScript geschrieben wird. Was wir in HTML tun müssen, ist, ein Canvas -Element und ein Referenz -Skript.js zu erstellen, was ziemlich einfach ist:
XML/HTML -Code -Inhalt in die Zwischenablage kopieren