https://github.com/terrymooreii/canvasclock
Module that will load a clock in a canvas element.
https://github.com/terrymooreii/canvasclock
Last synced: 2 months ago
JSON representation
Module that will load a clock in a canvas element.
- Host: GitHub
- URL: https://github.com/terrymooreii/canvasclock
- Owner: TerryMooreII
- License: mit
- Created: 2013-09-21T00:01:39.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-09-24T00:35:19.000Z (over 12 years ago)
- Last Synced: 2025-01-28T12:35:25.012Z (over 1 year ago)
- Language: JavaScript
- Size: 148 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CanvasClock
===========
A customizable JavaScript module that will load a clock in a canvas element.
###How to use
Include the JavaScript file also this depends on jQuery, i am working to remove that dependancy
````html
````
Then add this to enable the clock and its settings
````javascript
var clock = new CanvasClock({
element: 'clock' //This is mandatory and its the ID of the canvas element.
//Set what ever options you want to change, see below
});
````
The display it
````javascript
clock.display();
````
Or everything inline
````javascript
new CanvasClock({
element: 'clock' //This is mandatory and its the ID of the canvas element.
//Set what ever options you want to change, see below
}).display();
````
###Methods
The methods work just like jQuery, where the same method is either a getter or a setter.
Get/Set the timezoneOffset
````javascript
clock.timezoneOffset(); //Returns the value. Ex -5
clock.timezoneOffset('-1'); //Set the timezoneOffset to -1. Clock changes on next tick.
````
Get/Set the settings after initialization
````javascript
clock.settings(); //Returns the settings object
clock.settings({ //Pass any object to change the settings
radius:150,
displayNumbers: false,
});
````
##Options
Here are the list of options that you can pass at start up and their default value.
````javascript
{
element: 'clock', //Canvas Element
timezoneOffset: null, //This will be the offset from UTC ex. -5
radius: 100, //Radius of clock
displayClockOutline: true, //Show the clock's outer circle
displayMinuteDashes: true, //Show the clocks minute dashes
displayVertex: true, //Center dot, not working.
displayNumbers: true, //Show the numbers
smallPoint: this.radius / 50, //Center dot size, not working
colors:{
backgroundColor: '#fff', //Background color
vertexColor: '#000000', //Color of the vertex Not implemented
dashColor: '#333', //Dash color
clockColor: '#333', //Outside border of the clock
numbersColor: '#333' //Color of the numbers
},
minuteHand: {
display: true,
color: '#333',
width: 2, //Width of the hand
length: 10 //Note: Working on a good fomular for the length
},
secondHand:{
display: true,
color: '#333',
width: 1,
length: 10
},
hourHand:{
display: true,
color: '#333',
width: 2,
length: 40
},
onLoad: null, //Callback function to run once CanvasClock is loaded
onSecond: null, //Callback function to run every second
onHour: null, //Callback function to run every hour
onMinute: null //Callback function to fun every minute
};
````