Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript

1. JavaScript verwendet Canvas in HTML

1. Leinwand: Ein spezieller Bereich auf der Seite zum Zeichnen von Grafiken
2. Der Prozess des Zeichnens von Grafiken
(1) Erstellen Sie eine Leinwand: Verwenden Sie den Canvas-Tag in HTML5

<canvas id="id" width="width" height="height">
</Leinwand>

(2) Holen Sie sich die Leinwand in JavaScript

document.getElementById('id')

(3) Bereiten Sie den Pinsel vor: Das Kontextobjekt (Pinsel), auch als Zeichenumgebung bezeichnet, wird zum Zeichnen von Grafiken auf der Leinwand verwendet

 getContext('2d')

3. Zeichnen
(1) Zeichnen Sie eine Linie:
A. Ausgangsposition, Linienendpunkt (Endpunkt), Strich (Strichzeichnung)
B. 2D-Ebenen-Koordinatensystem: Die obere linke Ecke der Leinwand ist der Koordinatenursprung (0,0). Wenn Sie vom Ursprung nach rechts ausfahren, wird die X-Achse größer, und wenn Sie nach unten ausfahren, wird die Y-Achse größer.
C. Strichzeichnungsprozess:
a. Bestimmen Sie die Anfangsposition (Startpunkt): moveTo(x,y)
b. Bestimmen Sie den Verbindungsendpunkt (Endpunkt): lineTo(x,y)
c. Strich: stroke()
D. Linienstil
a. Linienbreite: lineWidth = 'value', die Standardeinheit ist Pixel
b. Strichfarbe (Linienfarbe): strokeStyle = 'Farbname oder hexadezimaler Farbwert'
c. Die Form des Endpunkts: lineCap = 'shape'

• butt: Standardwert, keine Endpunktform, zeigt eine gerade, quadratische Kante
• rund: runder Endpunkt
• Quadrat: quadratischer Endpunkt

E. Linienpfad: Unabhängig davon, wie viele Verbindungsendpunkte im selben Canvas hinzugefügt werden, gibt es nur einen Pfad.
a. Einen neuen Pfad starten: beginPath()
b. Schließen Sie den Pfad: closePath()
c. Pfadfüllung: fill()
Beispiel

ontext.strokeStyle = 'red' //Strichfarbe context.moveTo(10,10); //Startposition context.lineTo(10,100); //Verbindungsendpunkt (vertikale Linie)
context.lineTo(100,100); //Verbindungsendpunkt (horizontale Linie)
context.closePath();//Schließe den Pfadcontext.stroke();//Strokecontext.fill(); //Füllen

(2) Zeichne einen Kreis: arc(x, y, r, Startwinkel, Endwinkel, Richtung)
x, y: Koordinaten des Kreismittelpunkts r: Radius des Kreises Startwinkel: Kann Pi sein Endwinkel: Gleich wie der Startwinkel Richtung: Zeichenrichtung (im Uhrzeigersinn, gegen den Uhrzeigersinn), „true“ bedeutet gegen den Uhrzeigersinn, „false“ bedeutet im Uhrzeigersinn (Standard)
Beispiel

var canvas = document.getElementById('cavs');
var Kontext = Canvas.getContext('2d');
Kontext.Bogen(150,80,50,0,2,0*Math.PI)
Kontext.Strich()

2. Seitenspeichertechnologie

Sitzungsverfolgungstechnologie: Das HTTP-Protokoll ist ein zustandsloses Protokoll. Der Server muss die Sitzungsverfolgungstechnologie verwenden, um den Client zu ermitteln, der die Anforderung sendet.
1. Ursprüngliche Speichermethode (Session-Tracking-Technologie): über Cookies gespeichert
(1) Wird vom Server generiert und im Browserpuffer des Clients gespeichert
(2) Nachteile der Cookie-Methode
A. An HTTP-Nachrichten werden Cookies angehängt, was den Datenverkehr unsichtbar erhöht.
B. Cookies werden in HTTP-Nachrichten im Klartext übertragen, sind daher nicht sehr sicher und können leicht gestohlen werden.
C. Cookies werden im Browser gespeichert und können manipuliert werden. Der Server muss die Rechtmäßigkeit der Daten nach Erhalt überprüfen.
D. Browser begrenzen die Anzahl und Größe von Cookies (normalerweise auf 50, jeweils nicht größer als 4 KB), was für komplexe Speicheranforderungen nicht ausreicht.
2. HTML5-Seitenspeichermethode (Webspeicher)
(1) localStorage: dauerhafter lokaler Speicher. Es wird in einem Schlüssel-Wert-Format gespeichert. Wenn der Benutzer oder das Skript es nicht löscht, wird es auf dem lokalen Computer gespeichert.
(2)sessionStorage:
A. Sitzung: Sitzung. In der Webentwicklung dauert eine Sitzung vom Öffnen bis zum Schließen eines Browsers. Die Sitzung endet, wenn der Browser geschlossen wird.
B. sessionStorage: Daten werden im Speicher des Browsers gespeichert. Die Daten im Speicher werden automatisch gelöscht, wenn der Browser geschlossen wird. Sein Lebenszyklus ist der gleiche wie der Sitzungslebenszyklus
(3) Der Unterschied zwischen localStorage und sessionStorage
A. Unterschiedliche Lebenszyklen: localStorage ist permanent, während sessionStorage denselben Lebenszyklus wie die Sitzung hat und die Daten verschwinden, wenn die Sitzung endet.
B. Unterschiedliche Speicherorte: localStorage wird auf der Festplatte gespeichert, sessionStorage wird im Browserspeicher (Browser-Cache) gespeichert

Beispiel: Zeichnen eines Strichmännchens mit Canvas

<Text>
	<canvas id="cas" width="1000" height="1000"></canvas>
</body>
</html>
<Skript>
	var cas = document.getElementById('cas');
	var Kontext = cas.getContext('2d');
	//Kopf zeichnen context.arc(400,100,30,0,2*Math.PI);
	Kontext.Zeilenbreite='5';
	Kontext.Strich();
	//Den Torso zeichnen context.beginPath();
	Kontext.VerschiebeNach(400,130);
	Kontext.lineTo(400,140);
	Kontext.Zeilenbreite='5';
	Kontext.Strich();
	Kontext.beginPath();
	Kontext.VerschiebeNach(400,140);
	Kontext.lineTo(400,260);
	Kontext.Zeilenbreite='25';
	Kontext.Strich();
	//Den Ordner zeichnen context.beginPath();
	Kontext.VerschiebeNach(360,200);
	Kontext.lineTo(440,200);
	Kontext.lineTo(440,250);
	Kontext.lineTo(360,250);
	Kontext.Pfad schließen();
	Kontext.fillStyle='#fff';
	Kontext.Füllen();
	Kontext.Zeilenbreite='2';
	Kontext.Strich();
	//Den Arm zeichnen context.beginPath();
	Kontext.VerschiebeNach(400,140);
	Kontext.lineTo(440,200);
	Kontext.lineTo(400,240);
	Kontext.Zeilenbreite='10';
	Kontext.Strich();
	Kontext.beginPath();
	Kontext.Bogen(400,240,10,0,2*Math.PI);
	Kontext.fillStyle='#000';
	Kontext.Füllen();
	//Zeichne die Beine context.beginPath();
	Kontext.VerschiebeNach(380,400);
	Kontext.lineTo(400,260);
	Kontext.lineTo(420,400);
	Kontext.lineTo(400,240);
	Kontext.Zeilenbreite='10';
	Kontext.Strich();	
	Kontext.beginPath();
	Kontext.Bogen(365,400,15,0,1*Math.PI,true);
	Kontext.Pfad schließen();
	Kontext.Zeilenbreite='5';
	Kontext.Strich();
	Kontext.beginPath();
	Kontext.Bogen(405,400,15,0,1*Math.PI,true);
	Kontext.Pfad schließen();
	Kontext.Zeilenbreite='5';
	Kontext.Strich();
</Skript>

Der Effekt ist wie gezeigt: Sie können verschiedene Formen zeichnen, die Sie mögen, indem Sie die Parameter ändern

Dies ist das Ende dieses Artikels über die Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript. Weitere relevante JS-HTML-Canvas-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!