globalCompositeOperation Copy Fix – transparente Flächen in Javasript Canvas zeichnen
Heute gibt es mal einen sehr speziellen Beitrag. Ich denke, die Leute die betroffen sind, werden verstehen worum es geht. Allen anderen sei gesagt, dass der nächste Artikel wieder ein für ein breiteres Publikum sein wird.
Ich hatte hier im Blog vor einiger Zeit ja eine kleine Progressbar vorgestellt, die ausschließlich in JavaScript umgesetzt ist. Besonderes Augenmerk hatte ich unter anderem auf die schönen runden Ecken gelegt. (Siehe: nachfolgender Screenshot)
Ursprünglich hatte ich die transparenten Ecken mittels eigener Pfade realisiert, die ich mit
ctx.globalCompositeOperation = "copy"; ctx.fillStyle = "rgba(0,0,0,0.0)"; ctx.fill();
gefüllt habe.
Leider musste ich beim erneuten betrachten der Progressbar gestern sehen, dass das Script so nicht mehr funktioniert. Die Javascriptkonsolen in diversen Browsern (IE, FF, Chrome) gaben mir merkwürdiger Weise aber keinen Fehler aus.
Nach einigem googlen fand ich heraus, dass die globalCompositeOperation “copy” nicht mehr korrekt implementiert ist/unterstützt wird. Eine Lösung zu finden, war gar nicht so einfach, doch ich habe sie gefunden.
Transparente Flächen lassen sich immer noch wunderbar zeichnen. Dafür sind lediglich zwei Änderungen nötig. Zum einen muss der Wert für globalCompositeOperation auf “destination-out” umgestellt werden und die Füllfarbe muss komplett sichtbar sein. Bezogen auf meine Progressbar sieht das dann wie folgt aus:
ctx.globalCompositeOperation = "destination-out"; ctx.fillStyle = "rgba(0,0,0,1.0)"; ctx.fill();
So einfach kann’s sein. Ich hoffe ich kann hiermit dem ein oder anderen Verzweifelten helfen.
Viele Grüße,
Raffi
JavaScript basierter Online Gameboy Emulator
Ich geb’s zu, ich spiele wenig. Und wenn überhaupt, dann am liebsten Klassiker. Und ja, ich wurde noch mit einem Gameboy groß gezogen. Mit einem großen Gameboy.
Da diese Teile heute leider nicht mehr so leicht erhältlich sind, habe ich schon den einen oder anderen Emulator in den Händen gehabt.
Was mir die Tage über den Weg gelaufen ist, habe ich jedoch noch nie gesehen.
Ein 19-jähriger Student namens Grant hat seinen eigenen Gameboy Emulator entwickelt. Das Besondere daran ist, dass dieser vollständig JavaScript geschrieben ist und somit auch online läuft.
Ich finde, dass das schon eine außergewöhnliche Leistung ist. Wer mag, kann sich Grants Gameboy Emulator ja mal im Livebetrieb anschauen.
Die zum Spielen benötigten Roms müsst ihr euch jedoch selber besorgen. Ein Blick in Google sollte dabei helfen. Genauer werde ich da jedoch nicht drauf eingehen, weil sich das Beschaffen von Roms rechtlich in einer Grauzone befindet. Also nur die Roms laden, die ihr auch in echt besitzt. ;)
Und nun viel Spaß beim Daddeln. Da kommt noch echtes Retrofeeling auf.
Viele Grüße,
Raffi
JavaScript Progressbar mit HTML5 Canvas
Da ich für ein zukünftiges Webprojekt eine Progressbar brauchte, wenn möglich auf JavaScript basierend, und ich keine Komponente finden konnte, die meinen Vorstellungen entspricht, habe ich mich entschieden, meine eigene Progressbar zu schreiben.
Umgesetzt wurde das Projekt in Javascript unter Zuhilfenahme des HTML5 Canvas Elements. Dadurch kommt die Progressbar vollständig ohne irgendwelche Bilddateien aus, wie es zumeist bei anderen JS/CSS Lösungen der Fall ist. Die Progressbar kann momentan einen Status von 1 bis 100 Prozent anzeigen. Fehleingaben werden abgefangen und es wird, auch optisch, eine Errormeldung angezeigt.
Da ich meine Entwicklungen gerne teile und sicherlich nicht der Oberprofi in JavaScript bin, stelle ich euch die Progressbar natürlich zur Verfügung. Für Kritik, Lob und Verbesserungsvorschläge bin ich wie immer jederzeit offen.
Eine Demo der Progressbar könnt ihr euch hier anschauen. Denn Quellcode findet ihr hier: pbar.js
Nachfolgend zeige ich euch noch schnell, wie man die Progressbar verwenden kann.
In eurer HTML-Seite müsst ihr zuerst das Progressbar-Script, sowie die jQuery Library einbinden. Danach benötigt ihr ein Canvas-Element, dessen Größenangaben gleichzeitig auch bestimmen, wie groß eure Progressbar gerendert wird. Zu guter Letzt müsst ihr die Progressbar noch zeichnen lassen.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="pbar.js"></script> </head> <body> <canvas id="cvs" width="800" height="50"> Dein Browser kann diese Grafik nicht darstellen. </canvas> <script> drawCanvas(55,'cvs'); //Progressbar mit 55% in Canvas mit ID=cvs rendern </script> </body> </html>
Das war’s auch schon. Ich hoffe der ein oder andere von euch findet seine Freude daran!
Viele Grüße,
Raffi