Aus beruflichen Gründen habe ich kürzlich etwas über das Canvas-Tag in HTML erfahren.
Canvas ist eine neue Komponente von HTML5. Es ist wie ein Vorhang, auf den mithilfe von JavaScript verschiedene Diagramme, Animationen usw. gezeichnet werden können.
In der Ära vor Canvas war das Zeichnen nur mit Hilfe von Flash-Plug-Ins möglich, und Seiten mussten für die Interaktion JavaScript und Flash verwenden. Mit Canvas benötigen wir kein Flash mehr und können JavaScript direkt verwenden, um das Zeichnen abzuschließen.
Der Ärger begann, als ich selbst eine „Hallo Welt“ schrieb, nachdem ich mir das Tutorial angesehen hatte. Schauen Sie sich den folgenden Code an:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); 0); ctx.lineTo(200, 200); ctx.stroke();</script></body></html>
Die Bedeutung des obigen Codes besteht darin, eine gerade Linie mit einer Breite und Höhe von jeweils 200 Pixeln auf einer Leinwand zu zeichnen. Der Startpunkt der geraden Linie ist (0,0) und der Endpunkt ist (200.200).
Das vom Browser gezeichnete Bild lautet jedoch:
Schauen Sie sich dieses Bild an ~ Warum ist es so ein Hang? Es sollte nicht ~ Es sollte eine diagonale Linie sein ~~
Später, nachdem ich nach Informationen gesucht hatte, stellte ich fest, dass es beim Festlegen der Breite und Höhe des Canvas-Tags die folgenden Methoden und Konsequenzen gibt:
Die Standardbreite des Canvas-Elements beträgt 300 Pixel und die Höhe 150 Pixel. Um seine Breite und Höhe festzulegen, können Sie die folgende Methode verwenden:
Methode eins:
1 <canvas width=500 height=500$amp;>amp;$lt;/canvas>
Methode 2: Verwenden Sie den HTML5 Canvas API-Vorgang
1 var canvas = document.getElementById('die ID der zu bedienenden Leinwand');
2 Canvas.width = 500;
3 Canvas.width = 500;
Wenn Breite und Höhe mit der folgenden Methode festgelegt werden, wird das Canvas-Element von der Originalgröße auf die festgelegte Breite und Höhe gestreckt:
Methode 1: Durch die Verwendung von CSS wird das gedehnt
1 #Um die Canvas-ID zu bedienen{
2 Breite: 1000 Pixel;
3 Höhe: 1000 Pixel;
4 ｝
Enthält auch style= in Inline-Stilen. Das heißt, im obigen Beispiel kommt es auch zu einer Dehnung.
Methode 2: Vorgänge, die die HTML5-Canvas-API verwenden, werden gestreckt
1 var canvas = document.getElementById('die ID der zu bedienenden Leinwand');
2 canvas.style.width = 1000px;
3 canvas.style.height = 1000px;
Methode 3: Mit jquery wird $(#id).width(500); gestreckt
Sonstiges: Die Breite und Höhe der Leinwand können nicht in Prozent ausgedrückt werden. Canvas zeigt den Prozentsatz als numerischen Wert an
Aus den obigen Informationen können wir daher erkennen, dass der Grund darin liegt, dass der Code in meinem Beispiel oben die Breite und Höhe der Leinwand streckt, wodurch das Bild nicht den Erwartungen entspricht.
Jetzt habe ich ein Codebeispiel umgeschrieben, um die Breite und Höhe der Leinwand korrekt festzulegen:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Ihr Browser unterstützt das Canvas-Element nicht.</canvas><script type=text/ javascript> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.Stroke();</script></body></html>
Ergebnis:
Beenden.
ZusammenfassenDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Referenzwert für jedermanns Studium oder Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht für die Kommunikation hinterlassen Netzwerk.