Coder Social home page Coder Social logo

demipel8 / html5-canvas-circular-clock Goto Github PK

View Code? Open in Web Editor NEW

This project forked from flip120/html5-canvas-circular-clock

0.0 1.0 0.0 123 KB

A HTML5 CIRCULAR COUNTDOWN CLOCK FOR DISPLAY IN CANVAS

License: MIT License

JavaScript 100.00%

html5-canvas-circular-clock's Introduction

HTML5-CANVAS-CIRCULAR-CLOCK

A HTML5 CIRCULAR COUNTDOWN CLOCK FOR DISPLAY IN CANVAS

GETTING STARTED:

All you need is to get the 2d context of a html5 canvas element and pass it by parameter to the Clock as the other parameters, here an example:

var canvas = document.getElementById("myCanvas");
var cont = canvas.getContext("2d");

Next you need to create the clock passing the parameters you want:

var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

Finally, you need to start the clock by calling the function "step()";

The list of parameteres than you can override are this :

{
  context          : cont, //The 2d context of the html5 canvas (No default value)
  type             : Clock.TYPE_CLOCKWISE_INCREMENT, //The type of the clock can be Clock.TYPE_CLOCKWISE_INCREMENT, Clock.TYPE_CLOCKWISE_DECREMENT, Clock.TYPE_COUNTERCLOCKWISE_INCREMENT, Clock.TYPE_COUNTERCLOCKWISE_DECREMENT(Default Clock.TYPE_CLOCKWISE_INCREMENT)
  time             : time, //The countdown of the clock in seconds, (Default 60)
  showText         : true, //If you want that the clock includes text showing the seconds in it's center(Default true),
  textColor        : '#00CAFF', //The color of the text(Default White),
  bodyColor        : '#00CAFF', //The color of the clock's body, ( Default #FF0000),
  borderColor      : 'red', //The color of the border of the clock, (Default transparent),
  fontFace         : 'Arial', //The font of the text (Default Arial)
  radius           : 100, //The radius of the circle (Default 200),
  bodyWidth        : 10, //The width of the body // Default 10
  borderWidth      : 10, //The width of the border
  borderSeparation : 5, //The separation between the body and the border,
  x                : 0, // x coordinate of the clock, (Default 300)
  y                : 0, // y coordinate of the clock, (Default 300)
  endCallBack      : function(){ // Function to execute when the coutdown has finished
    //Do something
  },
  autoDraw         : true, //true indicates if the clock uses a interval to drawn itself in the canvas, false indicates that you want to drawn it manually by you own logic (Default true)
  freq             : 10, //The frequency that the clock refresh it's state (In milliseconds) (Default 10)
}

EXAMPLES

--AUTOMATIC USE--

var canvas = document.getElementById("myCanvas");
var cont = canvas.getContext("2d");
var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

clock.step();

--MANUAL USE--

var canvas = document.getElementById("myCanvas");
var cont = canvas.getContext("2d");

var clock = new Clock({ 
		context 	  : cont, 
  	type 		    : Clock.TYPE_CLOCKWISE_INCREMENT,
  	time 		    : 5,
  	showText 	  : true,
  	textColor 	: 'white',
  	bodyColor	  : '#00CAFF',
  	borderColor : 'white',
  	radius 	    : 100,
  	bodyWidth   : 10,
  	borderWidth : 10,
  	autodraw    : false,
  	endCallBack : function(){
  		alert("COUNTDOWN FINISHED!");
  	}
});

clock.step();

//Example with setInterval
setInterval(function(){
  clock.paint();
},10);

html5-canvas-circular-clock's People

Contributors

demipel8 avatar flip120 avatar isaax2 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.