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.
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