Wie funktioniert Javascript CANVAS?

Question

Javascript CANVAS ist erstaunlich: Es erlaubt uns, etwas wie Linien, Polygone auf dem Browser-Bildschirm zu zeichnen.

Ich frage mich, wie funktioniert Javascript CANVAS. Zum Beispiel, um eine Linie zu zeichnen, verwendet es eine Reihe ausgerichteter winziger Bilder, um die Linie oder einen anderen Ansatz zu simulieren?

Vielen Dank im Voraus.

Answer 1

Sicher, das ist die Implementierung der spezifischen JavaScript Engine Browser in Frage?

Answer 2

Jeder vernünftige Implementierer würde nur eine Bitmap (intern im Browser gespeichert) verwenden und mit nativen OS-Zeichenbefehlen zeichnen.

Warum ist das wichtig? Es ist überhaupt nicht verwandt mit HTML + CSS, wenn Sie sich fragen.

Weitere Einzelheiten zum Detail willen:

Wenn der HTML-Parser des Browsers (mit einer bestimmten Breite & Höhe) ein Canvas-Element sieht es muss ein On-Screen pixmap zuzuweisen, diesen Bereich zu decken. Dies geschieht entweder manuell (d. H. Malloc()) oder es ruft eine native Zeichnungs-API des Betriebssystems auf, um eine Oberfläche zum Zeichnen zu erstellen. Die native OS-API kann Windows, Gtk, Kde, Qt oder jede andere Zeichnungsbibliothek sein, die der Implementierer des Browsers ausgewählt hat. Außerdem hängt es stark vom Betriebssystem ab. Internet Explorer ruft wahrscheinlich in einer Windows-systemeigenen Bibliothek (d. H. DirectX oder WinFooBarMethod()) auf.

Sobald die Zeichenoberfläche erstellt ist, wird sie für die internen Eingeweide des JavaScript-Interpreters zugänglich gemacht, wahrscheinlich über einen Zeiger oder ein Handle auf die konstruierte Zeichenoberfläche. Wenn dann der JS-Interpreter einen Aufruf einer der Canvas-Methoden sieht, wird daraus ein Aufruf an den entsprechenden nativen OS-Befehl.

Also, die Windows 3.1-Stil Metapher:

"new canvas(width, height)" = "WinCreatePixmap(width, height)" 
"canvas.setPixel(x,y,color)" = "WinSetPixel(x,y,color)" 

und mit einem manuell verwaltet pixmap:

"new canvas(width, height)" = "malloc(width * height * sizeof(Pixel))" 
"canvas.setPixel(x,y,color)" = "canvas[x][y] = color;" 

Auch hier sollte es nicht an die JavaScript-Entwickler aus, wie diese Methoden umgesetzt werden . Die einzigen Personen, die sich darum kümmern müssen, sind diejenigen, die HTML5-kompatible Webbrowser mit Canvas-Unterstützung schreiben.

Answer 3

Wenn Sie interessiert sind, wie Strichzeichnung funktioniert, überprüfen Sie Bresenham's Line Drawing Algorithm.

Answer 4

Sie zu viel denken, es ist ganz einfach:

Eine Leinwand wie ein Bild, das auf den Browser gezogen werden kann.

Answer 5

Ich denke, die Umsetzung ist wichtig. Warum spielt es eine Rolle? Schau dir den Blitz an. Wenn Sie die Zeichnungs-API verwenden, um komplexe Fraktalgrafik zu erstellen, erstellt es tatsächlich Vektorgrafiken und macht jede Linie und Kurve ein Kind des Objekts, auf dem gezeichnet wird, so dass es die Vektorgrafik jedes Rahmens neu erstellt. CRASH! oder chug ... tuck ......... chug .............. Also für komplexe Fraktale oder Kunst, die Gleichungen aufzeichnet, muss ich eine Bitmap oder die Render-Engine verwenden CACKS. Es macht einen Unterschied, da ich jetzt versuche, einige meiner Flash-Multimedia auf Javascript zu übertragen und Unterschiede zwischen den Browsern zu finden.

Answer 6

Wenn Sie C++ kennen, können Sie zur Quelle gehen.

Zum Beispiel wird in Firefox das Objekt "Grafikkontext" durch die Klasse nsCanvasRenderingContext2D implementiert. Aber diese Klasse ändert die Pixel nicht direkt. Stattdessen bittet sie ein separates Objekt namens Theben, dies zu tun. Theben delegiert diese Arbeit wiederum an eine Grafikbibliothek mit der Bezeichnung Cairo, die normalerweise eine Bibliothek fragt, die von Ihrem Betriebssystem zur Verfügung gestellt wird, um die eigentliche Pixelarbeit auszuführen. Ich kann mir vorstellen, dass es überall eine ähnliche Geschichte gibt.

Ganz unten hat die Leinwand eine zweidimensionale Pixelmatrix. Jedes Pixel ist eine 32-Bit-Ganzzahl. Ein Pixel wird gesetzt, indem einem Element des Arrays ein Wert zugewiesen wird. Irgendwo gibt es ein bisschen Code, der bestimmt, welche Pixel zu malen sind und weist den entsprechenden Array-Elementen die entsprechenden Werte zu. Die Pixel werden zwar theoretisch von Ihrer Grafikkarte gezeichnet, aber ich habe gehört, dass Grafikkarten im Allgemeinen nicht mit 2D-Grafiken vertraut werden können, da die Hardware aggressiv auf 3D-Spiele abgestimmt ist und zu sehr auf Genauigkeit getrimmt werden kann für Geschwindigkeit.