Heim > Web-Frontend > HTML-Tutorial > So zeichnen Sie Grafiken über das Canvas-Tag

So zeichnen Sie Grafiken über das Canvas-Tag

藏色散人
Freigeben: 2021-04-20 15:41:41
Original
3754 Leute haben es durchsucht

So zeichnen Sie Grafiken über das Canvas-Tag: Erstellen Sie zunächst eine HTML-Beispieldatei und geben Sie dann „“ ein CSS-Attribute Stylen Sie es einfach.

So zeichnen Sie Grafiken über das Canvas-Tag

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Das Canvas-Tag ist ein neues Element in HTML5. Dieses Tag wird zum Zeichnen von Grafiken verwendet. HTML5 ist die fünfte große Überarbeitung der Hypertext Markup Language (HTML), der Kernsprache des World Wide Web und einer Anwendung unter der Standard Universal Markup Language.

Neulinge, die HTML lernen, sind sich dieses Tag-Elements möglicherweise nicht im Klaren.

Nachfolgend können wir Ihnen die Verwendung des Canvas-Tags anhand einfacher Beispiele ausführlich erläutern.

Der Beispielcode zum Zeichnen einer einfachen Leinwandgrafik (Rechteck) mit Leinwand lautet wie folgt:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Canvas简单使用示例</title>
    <style type="text/css">
        #FirstCanvas{
            width: 450px;
            height: 300px;
            border: 3px solid #3262ff;
            background-color: #acffcb;
        }
    </style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>
Nach dem Login kopieren

Empfohlene Referenzstudie: „HTML5-Tutorial "

Der grafische Effekt ist wie folgt:

So zeichnen Sie Grafiken über das Canvas-Tag

Das Etikett ist nur ein grafischer Container, und wir müssen ein Skript verwenden, um das zu zeichnen Grafik. Mit anderen Worten: Dieses Tag muss normalerweise ein ID-Attribut angeben, damit wir es im Skript verwenden können. (Dieses Skript bezieht sich normalerweise auf ein JavaScript-Skript)

Hier ist zu beachten, dass das -Element standardmäßig keine Ränder und Inhalte hat, daher müssen wir das Stilattribut verwenden, um Rahmenbreite und -höhe hinzuzufügen

In diesem Artikel geht es um das Zeichnen einfacher Leinwandgrafiken über das Canvas-Tag. Ich hoffe, dass es für Freunde in Not hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie Grafiken über das Canvas-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage