Animated HTML5 Canvas Odometer

Version 0.3.0 - 01 Mar 2012

Inspired by Gavin Brock's CSS/JavaScript Animated Odometer, and Gerrit Grunwald's Java Rolling Counter.

No canvas support!

Create an odometer object:
myOdometer = new odometer(canvasCtx, parameters);

• htmlElem is a HTML element in which to draw the odometer widget.
• parameters is an associative array of parameters for the object. Valid parameters are:
  • digits: Number of integer digits to display
    Default value: 6
  • decimals Number of decimal digits to display
    Default value: 1
  • height: The height of the odometer
    Default value: 40
  • valueForeColor: The color of the integer digits
    Default value: '#F8F8F8'
  • valueBackColor: The background color of the integer digits
    Default value: '#050505'
  • decimalForeColor: The color of the decimal digits
    Default value: '#F01010'
  • decimalBackColor: The background color of the decimal digits
    Default value: '#F0F0F0'
  • font: The font for the digits (size is calculated from height param)
    Default value: 'sans-serif'
  • wobbleFactor: The uneveness of the number alignment (factor of the height)
    Default value: 0.07
  • value: The initial value to display
    Default value: 0

Set the value on the odometer:
myOdometer.setValue(val);

• val is the number to display. This can be fractional.

Get the current value from the odometer:
val = myOdometer.getValue();

Download

Download a zip file of the script and this demo page from here