Biblioteca de JavaScript reloj basado en canvas-CanvasClock

Vista prévia

Descripción

Esta es una biblioteca de JavaScript basada en lienzo con 15 relojes diferentes que se pueden incrustar en páginas Web. Sin ninguna librería CSS y 3rd JavaScript.

Funcionamiento

Sólo tiene que colocar la biblioteca canvas_clock. js en la página web y estamos listos para ir.

<script src="canvas_clock.js"></script>

Cree un elemento canvas de HTML5 para colocar el reloj.

<canvas id="demo" width="200px" height="200px"></canvas>

Cree un reloj predeterminado.

myClock_={

// options here
};

Configuración del reloj con las siguientes opciones.

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,

};

Represente el reloj en el elemento canvas que acaba de crear.

context = document.getElementById('demo').getContext('2d')
clock_conti(context, 200, object);