HTML5 Canvas (invertiert) Koordinatensystem

Leinwände sind verkehrt, denn Sie ist intuitiv zu einer Menge von Schnittstellen. Web-Seiten sind mehr wie ein Blatt Papier als ein Kartesisches Diagramm, denn Sie beginnen oben Links und Lesen Sie unten. Also, html ist angelegt wie die. Ich nehme an, dass das canvas-element verwendet das gleiche Koordinatensystem für die Konsistenz.

Können Sie es drehen, indem Sie die Skalierung der y-Achse um -1. Müssen Sie möglicherweise, um Sie zu transformieren als auch, ich bin mir nicht sicher, aber es gibt einen Kommentar auf Ihre Frage, dass sollte helfen. Die transformieren-Funktionen sind so ziemlich das gleiche in html, wie Sie in diesem Beitrag.

Ich benutze den html5-standard draft eine Menge für die Referenz. Hier einige Inhalte aus dem canvas-2d-context-Abschnitt:

void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);

Ich überspringe die Diskussion, was betrachtet werden sollte, invertiert und nicht invertiert kartesischen Koordinatensystem (es ist ziemlich egal, von welchem Kontext Sie die erste Begegnung mit dem Konzept und dem, was die Konventionen wurden in der Tat gibt es).

Aber der Grund das HTML-canvas und SVG und viele andere Koordinatensysteme bezogen auf screen-rendering) setzen Sie origo in der oberen linken Ecke ist einfach, weil die CRT-Bildschirme (die für lange Zeit war der dominierende computer-display-Technologie) gerendert, die computer anzeigen, indem ein Elektronenstrahl-sweep über den Bildschirm, Zeile für Zeile, bis der gesamte Bildschirm gerendert wurden. Für alle CRTs, die ich gehört habe über die scan-Linien horizontaler und gerendert wurden, von Links nach rechts. Auch der oberste scan-Linie machte den ersten, also der linken oberen Ecke ist, wo alle Bildschirm wird aktualisiert begann. Lassen, dass die Ecke werden origo mit X erhöhen nach unten und die Y-Erhöhung rechts vereinfacht die Berechnungen für die Zuordnung eines Bildschirms zu koordinieren, um video-Speicher Positionen (und vereinfachten Berechnungen gemeint vereinfachte hardware in den frühen Tagen der computer-display-Controller). AFAIK, TV-screens Scannen Ihre zeigt in dieser Weise, ausgehend von der oberen linken Ecke.

(Arcade-Spiele waren ein bisschen erfinderisch in dieser Hinsicht, nicht wenige von Ihnen, nahm einen "normalen" computer-CRT, und dann musste es um 90 Grad gedreht auf dem Display, die waren besser geeignet, um das layout der video-Spiel produziert wird. Für diejenigen, die Spiele der Bildschirm aktualisiert, nicht in der linken oberen Ecke, aus offensichtlichen Gründen.)

Diesem übereinkommen zu stellen origo oben Links und lassen Sie X erhöhen nach unten und Y rechts ist geblieben seit jenen frühen Tagen, und scheint zu sein, verwendet in allen Arten von computer-Grafik-Kontexten.

Aber ich bin damit einverstanden, mathematischen X/Y-Graphen orientiert sich anderweitig, insbesondere mit X positiv nach oben.

Als @franticfantom sagt, können Sie mit der transformation features des HTML-Canvas-API zu tun einer Skala von -1 in Y-Richtung spiegeln Sie den graph auf dem Kopf und verwenden Sie dann eine übersetzung zu bewegen origo von Links oben zu, wo immer Sie wollen. Werden Sie sich bewusst, dass eine solche Skala -1 transformation spiegeln alles, also nur die Anwendung, dass jeder text, den Sie verwenden in Ihren Grafiken einfach gespiegelt oder auf dem Kopf stehend text. Einige Sorgfalt muss getroffen werden, um "unreverse" beliebiger text in Platz.