In diesem Artikel lernen wir ein HTML5-Tag kennen, das zum Erstellen von Grafikgrafiken verwendet wird, nämlich das Canvas -Tag.

Wenn Sie beispielsweise ein geometrisches Diagramm zeichnen möchten, müssen wir eine Bilddatei verwenden. Aber mit Canvas können Sie sich vollständig selbst zeichnen.

1. Was ist HTML5 Canvas?

Canvas ist ein HTML5-Tag, das anderen HTML-Tags ähnelt, aber der offensichtlichste Unterschied besteht darin, dass der Inhalt von Canvas aus Javascript erstellt wird. Um Canvas zu verwenden, müssen Sie das <canvas></canvas> -Tag an der Position platzieren, die Sie anzeigen möchten, und dann die von HTML5 bereitgestellten APIs verwenden, um die Objekte innerhalb des Canvas (Linie, Kreis, …) zu manipulieren.

Wenn Sie Canvas verwenden, müssen Sie den Unterschied zwischen den Elementen des Canvas und seinem Inhalt verstehen. Das Canvas-Element ist nur ein gewöhnliches HTML-Tag, aber sein Inhalt ist eine Sammlung von Objekten, die eine Grafik bilden.

Bei der Anzeige im Browser wird der Canvas als png -Bild angezeigt.

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Lấy thẻ HTML Canvas var canvas = document.getElementById('myCanvas'); // Vẽ ở mô hình 2D var context = canvas.getContext('2d'); // Thiết lập font chữ và màu context.font = '40pt Calibri'; context.fillStyle = 'blue'; // vẽ một đoạn text tại vị trí 150px 100px context.fillText('Hello World!', 150, 100); </script>

Wenn Sie hochlaufen, sehen Sie einen Text " Hello World! ", versuchen Sie es zu verdunkeln, okay? Absolut nicht, da es sich um ein Objekt handelt, das als Bild angezeigt wird, sodass Sie es nur als png -Datei speichern können, nicht mehr als Text.

2. Fazit

Da dies der erste Artikel ist, mit dem eine Lernreihe über Canvas-Tags in HTML5 gestartet wird, gehe ich nicht auf die Handhabung ein, sondern stelle nur das Konzept vor, was Canvas ist, und einige Hinweise zur Verwendung von Canvas. In den nächsten Artikeln erfahren Sie, wie Sie die HTML5-Canvas-API verwenden, um Objekte in Canvas zu manipulieren.