Eine Uhr mit processing.js in canvas erstellen

Canvas sind die neuen HTML5 *Mode* Elemente. Mit processing.js kann man diese einfach erstellen oder manipulieren. In diesem Beispiel wird eine Digitale Uhr erstellt.

Als erstes benötigt man für diese Demo sicherlich einen aktuellen Browser. Auf ein Fallback für alte Browser wird in diesem Beispiel verzichtet. Damit der Code Funktioniert muss man sich zuerst die Aktuelle JS Datei von processing.js herunterladen und in der HTML Datei einbinden.

Processing.js Code für die Uhr


void setup()
{
  /* groesse des canvas elements */
  size(390,90);
  /* hintergrund frabe */
  background(255);
  /* schrift frabe */
  fill(200, 200, 255);
  /* schrift art */
  PFont fontA = loadFont("courier");
  /* schrift groesse */
  textFont(fontA, 50);
  /* text und position */
  text('laden ...', 50, 50);
  frameRate(1);
  //noLoop();
}

int r;
int g;
int b;

void draw(){
  PFont fontA = loadFont("courier");
  textFont(fontA, 120);
  background(230);
  int h = hour();
  if(h < 10){
      h = "0"+h;
  }
  int m = minute();
  if(m < 10){
      m = "0"+m;
  }
  int s = second();
  if(s < 10){
      s = "0"+s;
  }
  /* dynamische farben und position der Zeiten */
  fill(0, 255-h/23*255, h/23*255);
  text(h, 0, 82);
  fill(50, 50, 100);
  text(':', 95, 75);
  fill(m/59*255, 0, 255-m/59*255);
  text(m, 130, 82);
  fill(50, 50, 100);
  text(':', 225, 75);
  fill(s/59*255, 255-s/59*255, 0);
  text(s, 260, 82);
}
Processing.js Code
Sorry, dein Browser kann keine CANVAS Elemente!