Heim > Web-Frontend > H5-Tutorial > So verwenden Sie HTML5-Canvas_html5-Tutorial-Fähigkeiten

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-16 15:45:36
Original
1985 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
  3. 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
  3. 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
    3. 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:
    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
    Aktuelle Ausgaben
    HTML5-Validierung für Symfony 2.1
    Aus 1970-01-01 08:00:00
    0
    0
    0
    Der Unterschied zwischen HTML und HTML5
    Aus 1970-01-01 08:00:00
    0
    0
    0
    html5 anzeigen ausblenden
    Aus 1970-01-01 08:00:00
    0
    0
    0
    HTML5-Formularvalidierung
    Aus 1970-01-01 08:00:00
    0
    0
    0
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage