Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

So verwenden Sie HTML5-Canvas_html5-Tutorial-Fähigkeiten

WBOY
Freigeben： 2016-05-16 15:45:36
Original
1902 Leute haben es durchsucht

Das

canvas-Element verwendet JavaScript zum Zeichnen von Bildern auf der Webseite und verfügt über keine Zeichenfunktionen.

Canvas ist ein rechteckiger Bereich, der jedes Pixel steuern kann.

Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.

Hier einige Beispiele:

1. Füllen Sie die Leinwand

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. "myCanvas" width="200" height="100" style="border:1px solid red;">
Führen Sie Folgendes aus:

2. Koordinaten abrufen

JavaScript-Code
Inhalt in die Zwischenablage kopieren
XML/HTML-Code
Inhalt in die Zwischenablage kopieren
  1. <div id="coordiv" Stil="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">div>
  2. <div id="xycoordinates" >div>

Führen Sie Folgendes aus:

3. Zeichnen Sie Linien und Grafiken

1) Zeichnen Sie ein Quadrat wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  2. Ihr Browser unterstützt das Canvas-Tag nicht
    7. Führen Sie Folgendes aus:

2) Zeichnen Sie einen Kreis wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  2. Ihr Browser unterstützt kein Canvas
    8. Führen Sie Folgendes aus:

4. Farbverlauf zeichnen

JavaScript-Code

Inhalt in die Zwischenablage kopieren
  • "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ihr Browser unterstützt das Canvas-Tag nicht
    • Führen Sie Folgendes aus:
    • 5. Bilder

    JavaScript-Code

    Inhalt in die Zwischenablage kopieren

    1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
    2. Ihr Browser unterstützt das Canvas-Tag nicht
      7. Die Ausführung ist wie folgt:

    Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

    Originaltext:

    http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

    Verwandte Etiketten：
    canvas html5 画布
    Quelle：php.cn
    Vorheriger Artikel：HTML5-CSS3-Fortschrittsbalken-Countdown-Animations-Spezialeffektcode [empfohlen]_HTML5-Tutorial-Kenntnisse Nächster Artikel：HTML5 Canvas的常用线条属性值总结_html5教程技巧
    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
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
    Aus 2024-04-06 15:33:12
    0
    1
    433
    Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
    Aus 2024-04-05 12:57:00
    0
    1
    456
    Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
    Aus 2024-04-02 11:47:56
    0
    1
    275
    Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
    Aus 2024-04-01 20:42:38
    0
    1
    259
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage