Anfänger-Canvas <Teil 1 – Grundlagen>

Der HTML5-Standard ist schon lange nicht mehr verfügbar, aber es scheint, dass Canvas derzeit nicht an allzu vielen Stellen verwendet wird. Ein sehr wichtiger Grund ist, dass der Standard von Canvas noch nicht vollständig festgelegt ist und nicht für den groß angelegten Einsatz in Produktionsumgebungen geeignet ist. Die Vorteile von Canvas liegen jedoch auch auf der Hand. Beim Zeichnen von Diagrammen mit einer großen Anzahl von Elementen ist SVG beispielsweise aufgrund von Leistungsproblemen häufig nicht in der Lage, diese Aufgabe zu erfüllen Obwohl der Effekt relativ beeindruckend war, war dies aufgrund von Leistungsproblemen nicht möglich. Jeder Avatar ist ein DOM und die Animation wird von CSS3 gesteuert, was zu einer sehr geringen Leistung führt. Darüber hinaus können mit der Verbesserung der Hardwareleistung nach und nach Funktionen wie Video-Screenshots und Bildverarbeitung auf Webseiten implementiert werden. Die meisten Websites verwenden Flash, aber die Leistung von Flash ist auf Mac-Computern nicht hoch, und Sie müssen einige zusätzliche Kenntnisse erwerben Wissen. . Canvas verwendet JavaScript direkt zum Zeichnen und ist Mac-freundlich, sodass es als Nachfolger von Flash angesehen werden kann.

Canvas verwenden

<br/>

Nachdem ich so viel gesagt habe: Was genau ist Canvas?

Canvas bedeutet auf Englisch „Leinwand“, aber das hier erwähnte Canvas ist ein neues Element in HTML5, auf dem Entwickler eine Reihe von Grafiken zeichnen können. Die Art und Weise, wie Canvas in eine HTML-Datei geschrieben wird, ist sehr einfach:

<br/>

Das id-Attribut kann von allen HTML-Elementen verwendet werden. Canvas verfügt nur über die letzten beiden Attribute (die die Breite bzw. Höhe steuern), andere gibt es nicht. In Bezug auf die Kompatibilität gab CanIUse oben an, dass die Grundfunktionen derzeit von 90 % der von Benutzern verwendeten Browser unterstützt werden, sodass sie in den meisten Fällen bedenkenlos verwendet werden können.

Beachten Sie, dass Sie die mit Canvas gelieferten Breiten- und Höheneigenschaften verwenden müssen. Verwenden Sie kein CSS zur Steuerung, da die CSS-Steuerung zu einer Verformung des Canvas führt. Sie können versuchen, es mit PhptpShop zu vergleichen. Letzteres ändert die „Bildgröße“, während ersteres die richtige Methode zum Ändern der „Leinwandgröße“ ist. Das folgende Bild ist beispielsweise ein horizontales Zusammenfügen von drei Bildern: Das schwarze Feld ganz links ist das Originalbild mit einer Größe von 50 Pixel * 50 Pixel. Das mittlere Bild ist der Effekt der Änderung der Bildgröße auf 100 Pixel * 100 Pixel. aber für das Bild selbst Es wird gesagt, dass der Koordinatenbereich nicht größer geworden ist; der Bereich ganz rechts ist der richtige 100px * 100px Canvas.

Canvas Die meisten Zeichenmethoden haben nichts mit dem -Tag zu tun und Sie müssen JavaScript verwenden, um sie zu bedienen. Dies ist die sogenannte Canvas-API.

Wir erhalten zuerst dieses Element:

var canvas = document.getElementById('canvas');<br/>

Dann erhalten wir es über eine Methode, die alle aufrufen kann Canvas-API-Eingang:

var ctx = canvas.getContext('2d');<br/>

Wenn Sie 2D sehen, sind Sie aufgeregt und denken über 3D nach? Es gibt keine Möglichkeit, 3D zu schreiben, aber wenn Sie die Tür zur 3D-Welt öffnen möchten, können Sie canvas.getContext('webgl') schreiben. Bei WebGL handelt es sich jedoch um eine Reihe von Standards, die auf OpenGL ES 2.0 basieren und sich völlig von diesem Artikel unterscheiden. Daher wird hier nicht darauf eingegangen.

Grundlegende Konzepte in Canvas

Koordinaten

sind nicht dasselbe wie das übliche kartesische Koordinatensystem in der Mathematik. Das Koordinatensystem von Canvas ist ein übliches Koordinatensystem in Computern sieht so aus:

Die obere linke Ecke der Leinwand ist (0,0), x nimmt nach rechts zu, y nimmt nach unten zu und x und y sind beide ganze Zahlen (auch wenn Der Berechnungsprozess ist keine Ganzzahl, er wird beim Zeichnen als Ganzzahl behandelt) und die Einheit ist Pixel.

Zeichnen

Machen Sie alle nostalgisch. Ich weiß nicht, wie viele Schüler in jungen Jahren mit der Logo-Sprache gespielt haben. Darin kann man eine kleine Schildkröte steuern, die auf einem Brett läuft, zeichnet, einen Stift aufnimmt und einen Stift ablegt. Das Gleiche gilt für Canvas. Sie müssen die Bewegung und das Zeichnen eines Pinsels steuern. Allerdings ist Canvas fortgeschrittener. Sie können einige Funktionen direkt zum Zeichnen von Bildern verwenden, ohne die Position des Pinsels steuern zu müssen.

Grundlegende Grafiken in Canvas

Viele interessante Dinge können mit der oben definierten ctx-Variablen erledigt werden. Schauen wir uns zunächst an, wie man einige grundlegende Grafiken zeichnet.

Linie

Wir legen fest, dass sich der Pinsel zu einem bestimmten Punkt bewegt, und weisen den Pinsel dann an, vom aktuellen Punkt zu einem anderen Punkt zu zeichnen. Wir können den Pinsel mehrmals bewegen und zeichnen und ihn schließlich gleichmäßig auf dem Bildschirm ausgeben. Ein Beispiel lautet wie folgt:

ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.moveTo(10, 20);
ctx.lineTo(40, 70);
ctx.stroke();

Im obigen Code ist lineTo eine Funktion zum Generieren von Linien. Nach der Ausführung bewegt sich der Pinsel zum Endpunkt der Linie. Es ist zu beachten, dass die Linie zu diesem Zeitpunkt nicht auf dem Bildschirm angezeigt wird und Stroke aufgerufen werden muss, um sie anzuzeigen. Dieses Design ist sinnvoll, da die Ausgabe von Inhalten auf dem Bildschirm viele Ressourcen erfordert. Wir können zuerst eine Welle von lineTo speichern und schließlich einen großen Strich verwenden.

Pfad

绘制路径非常简单，只需要先告诉 ctx 一声“我要开始画路径了”，然后通过各种方法（例如 lineTo）绘制路径。如果需要画一个封闭路径，那就最后告诉 ctx一声：“我画完了，你把它封闭起来吧。”当然，不要忘记利用 stroke 输出到屏幕上。

一个简单的例子：

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50);
ctx.closePath();
ctx.stroke();

如果我不想只描绘路径线条，而是想填充整个路径呢？可以将最后一行的 stroke 改成 fill，这样就跟使用了画图中的油漆桶一样，封闭路径里面的内容就都被填充上颜色了：

ctx.fill();

弧 / 圆形

绘制弧的函数参数比较多：

ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 起始角度, 终止角度, 是否为逆时针);

注意，在 Canvas 的坐标系中，角的一边是以圆心为中心的水平向右的直线。角度单位均为弧度。例如下图，确定了圆心、起始角度（图中标明的锐角）和终止角度（图中标明的钝角），方向为逆时针，于是就有了这么一个弧。如果方向为顺时针，那么就会是一个跟它互补的、非常非常大的弧……

所以如果转了 2π 圈之后，弧就成了圆形，因此也可以使用绘制弧的方式来绘制圆形：

ctx.beginPath();
ctx.arc(圆心 x 坐标, 圆心 y 坐标, 半径, 0, Math.PI * 2, true);
ctx.closePath();

最后一个参数随便填（当然也可以不填），因为不管是顺时针还是逆时针，转了 2π 圈之后都是一个圆。