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

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
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
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
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