Author: | Krugaroo |
---|---|
Views Total: | 2,772 views |
Official Page: | Go to website |
Last Update: | October 20, 2016 |
License: | MIT |
Preview:

Description:
This is a canvas based JavaScript library with 15 different clocks that can be embedded in webpages. Without any CSS and 3rd JavaScript libraries.
How to use it:
Just place the canvas_clock.js library into the webpage and we’re ready to go.
<script src="canvas_clock.js"></script>
Create an HTML5 canvas element to place the clock.
<canvas id="demo" width="200px" height="200px"></canvas>
Create a default clock.
myClock_={ // options here };
Config the clock with the following options.
myClock_={ // shows indicators "indicate": true/false, // color of the indicaters "indicate_color": "#aabbcc", // color of the seconds dial "dial1_color": "#aabbcc", // color of the minutes dial "dial2_color": "#aabbcc", // color of the hour dial "dial3_color": "#aabbcc", // shows the time as well using text "time_add": 1/2/3/4, // the color of the text time "time_add_color": "#aabbcc", // use 24 hour notation "time_24h": true/false, // modify the time by adding or subtracting seconds to the time "timeoffset":0, // show the date as well using text "date_add": 1/2/3/4/5, // the color of the date text "date_add_color": "#aabbcc", // the background color "bg_color":"#fff", // the opacity of the background image if shown "bg_opacity": 0.0-1.0, };
Render the clock on the canvas element you just created.
context = document.getElementById('demo').getContext('2d') clock_conti(context, 200, object);
very nice information and it always very useful by https://goo.gl/aA7xJ8