html5-Canvas kann in den web_html5-Tutorialfähigkeiten verschiedene Grafiken zeichnen

Ich denke, das Wichtigste in HTML5 ist die Einführung von Canvas, das es uns ermöglicht, verschiedene Grafiken im Web zu zeichnen. Es fühlt sich so an, als ob dies allein zwischen unseren Web- und Desktop-Programmen etwas verschwimmt. Außerhalb von HTML5 gibt es im Web auch XML-basierte Zeichnungen wie VML und SVG. Canvas ist pixelbasiertes Zeichnen. Canvas ist ein HTML-Knoten, der einem Zeichenbrett entspricht. Zum Zeichnen müssen wir js verwenden.
Wie folgt:
Ihr Browser unterstützt die -Definition noch nicht.
Wir können das Canvas-Objekt als var c=document.getElementById("myCanvas"); erhalten. Seine js-Attributmethoden sind unten aufgeführt:
1: Zeichnen Sie das Rendering-Objekt , c.getContext( „2d“), um das 2D-Zeichnungsobjekt zu erhalten, ist das erhaltene Objekt dasselbe Objekt, egal wie oft wir es aufrufen.
2: Zeichenmethode :
clecrRect(left,top,width,height) löscht den angegebenen rechteckigen Bereich,
fillRect(left,top,width,height) zeichnet das Rechteck, und fillStyle füllen.
fillText(text,x,y) zeichnet Text;
StrokeRect(left,top,width,height) zeichnet ein Rechteck und zeichnet den Rand mit StrokeStyle.
beginPath(): Beginnt das Zeichnen des Pfades und setzt den Pfad auf den Anfangszustand zurück;
closePath(): Das Zeichnen des Pfades endet und fügt eine geschlossene Kurve vom Anfang an hinzu ;
moveTo(x, y): Legt die tatsächlichen Koordinaten der Zeichnung fest.
lineTo(x, y); Zeichne eine gerade Linie von der aktuellen tatsächlichen Position zu x, y.
fill(), Stroke(), Clip(): Nachdem Sie die endgültige Füllung und den Randumriss der Zeichnung fertiggestellt haben, schneiden Sie den Bereich ab.
arc(): Zeichnen Sie einen Bogen, die Mittelposition, den Anfangs- und Endbogenmaß, um die Position und Größe des Bogens anzugeben.
rect(): rechteckiger Pfad (Imag img): zeichnen ein Bild;
quadraticCurveTo(): ​​​​Quadratischer Spline-Pfad, Parameter zwei Kontrollpunkte;
bezierCurveTo(): ​​​​Bezier-Kurve, Parameter drei Kontrollpunkte; Daten. ImageData zeichnet Breiten-, Höhen- und Datendaten auf, wobei Daten die Aufzeichnung unseres Pigments als
argb sind, sodass die Array-Größenlänge Breite*Höhe*4 ist und die Reihenfolge RGBA ist. getImageData dient dazu, die Pixel des rechteckigen Bereichs abzurufen, und putImageData dient dazu, die Pixel des rechteckigen Bereichs festzulegen … und so weiter!

3: Koordinatentransformation
:
translate (x, y): Translationstransformation, der Ursprung bewegt sich zu den Koordinaten (x, y); rotate (a): Rotationstransformation, drehen ein Gradwinkel; Skalierung (x, y): Skalierungstransformation;
save(), Restore(): einen Stapel bereitstellen, um den Zeichnungsstatus zu speichern und wiederherzustellen. Speichern schiebt den aktuellen Zeichnungsstatus in den Stapel. wiederherstellen öffnet den Stapel, stellt den Zeichnungsstatus wieder her … und so weiter!
Okay, es ist zu spät. Anbei mein Testcode:





Code kopieren

Der Code lautet wie folgt:

Durchsuchen Der Browser unterstützt es noch nicht.