Ein wirklich, total simpler, einfacher Text-Scroller lässt sich in knappen 25 Zeilen Code in JavaScript mit dem HTML5 Canvas zaubern. Die folgenden Schritte sind hierfür notwendig

Canvas definieren

Um auf einen Canvas Zeichnen zu können benötigt man das entsprechende HTML 5 Element. Den Canvas den ich verwende hat eine breite von 600 Pixeln und eine Höhe von 40 Pixeln

<canvas id="canvas" width="600" height="40" style="border-style: dotted;"> Hello, world. </canvas>

Damit ist die Grundlage für das Zeichnen geschaffen. Normalerweise wird der Inhalt zwischen den Tags Browsern angezeigt die das Canvas Element nicht verstehen, ich benutze den Inhalt um diesen über den Canvas zu scrollen.

Einstiegsmethode

Das JavaScript benötigt noch einen Einstiegspunkt, dazu nehme ich die onload Methode her.

window.onload = function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");  // more code... });

In der onload Methode wird der eigentliche 2D Zeichen Kontext vom Canvas Element geholt, damit lässt sich dann auf dem Canvas zeichnen.

Canvas Initialisieren

Nun initialisiere ich noch die Frames pro Sekunde, sowie die Schriftart und den Schatten den die Schrift werfen soll.

var FPS = 1000 / 60; var currentX = 600; var currentY = 30;  context.shadowColor = "#aaaaaa"; context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.shadowBlur = 3; context.font = "24pt Segoe UI";  var text = canvas.innerHTML; var metrics = context.measureText(text);

Jetzt benötige ich nur noch die Methode die entsprechend die momentane Position in Bezug auf die Framerate aktualisiert

Text Position aktualisieren

In JavaScript benutzt man hierfür einen Timer den man mittels setInterval setzen kann. setInterval erwartet eine einfache Funktion als Callback und die entsprechenden Millisekunden der Aufruf-Häufigkeit

setInterval(function() { context.clearRect( 0, 0, 600, 40 ); context.fillText( text, currentX, currentY );  currentX -= 2; if( currentX + metrics.width < 0 ) { currentX = 600; } }, FPS );

Das war es. Ein einfacher HTML5 Canvas basierter Text-Scroller.

Hier der Link zur Demo