| ⬅ Neuer | Älter ➡ |
Um in HTML eine dynamische Pixelgrafik anzuzeigen, verwendet man bei modernen Browsern am besten das CANVAS-Element. Dieses ist eine Zeichenfläche, in der sich per JavaScript geometrische Formen zeichnen lassen, aber dessen Pixel sich auch direkt setzen lassen. Diese Methode verwende ich bei Minicraft. Leider gibt es dieses praktische Element erst seit einigen Jahren und einige (alte) Browser, welche es noch nicht kennen. Für jene müssen Alternativen gefunden werden.
Um zumindest im Internet Explorer geometrische Formen anzeigen zu können, wurde das Modul ExplorerCanvas entwickelt. Auch in anderen Browsern lassen sich hiermit zumindest Dreiecke zeichnen. Für Pixel-Shader-Programme wie Minicraft sind beide Methoden jedoch völlig nutzlos.
Eine weitere Methode wäre, in JavaScript eine Bilddatei (etwa BMP) zu generieren, dieses in Base64 zu kodieren und es einem IMG-Element als Quelle zuzuweisen. Ein uralter Machbarkeitsbeweis existiert und auch mein Bildschirmtest (siehe Werke) funktioniert so. Der Browser muss aber data:-URLs unterstützen. Der einst populäre IE6 ginge hiermit also leer aus.
Schließlich verbleibt dann nur noch der sehr naive Ansatz, jeden Pixel als ein quadratisches DIV-Element mit einer Hintergrundfarbe zu verkörpern. Bei geringer Auflösung lässt sich so halbwegs etwas darstellen. Mir kam aber noch eine mögliche Optimierungsidee: Es können 3 Pixel in ein Element gesteckt werden, wenn man außerdem die Rahmenfarbe setzt. Welche Methode performanter ist, lässt sich in diesem soeben erstellten Experiment erkennen. In Chrome bringt der Rahmen-Trick eine deutlich höhere Bildrate. Das Verhalten von älteren Browsern habe ich noch nicht getestet.