In native javascript: In the event handler of your choice, call chronoCanvas, and use the canvasTarget parameter for target the canvas node. It will use the querySelectorAll function.
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer1"
});
})
Portions parameter is how many parts is split your pie chart. By default, set to 600.
Frequency time in milisecond is the interval when canvas is refreshing. By default set to 100.
In this example, you got 1 second between each refreshing. Then, the full turn take 1 minut, as the circle is divided in 60 portions. Compare to previous example with default values to see how it take finaly the same time, but how animation is different because of the interval and the portions.
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer2",
portions: 60,
frequency: 1000
});
})
Iteration parameter give you the abilities to choose how many turn you want to do. It take a number as value. If set to 0, giving infinite loop. In the example bellow, will turn infinitely.
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer3",
frequency: 1,
iteration: 0
});
})
outputEnd parameter allow you to launch a function at end of all the cycles you defined. See in example how the chronoCanvas is launch by a button, and launch an alert when all iterations are over.
var chronoCanvas = require('chronoCanvas');
function thiscallback(){
alert("end of turns!");
}
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('myButton').addEventListener("click",
function(){
chronoCanvas({
canvasTarget: ".chronometer4",
iteration: 2,
portions: 8,
frequency: 500,
outputEnd: thiscallback
});
}
,false);
})
ahead parameter receive a string with list of keywords, separated by simple spaces. The first keyword is unavoidably "stroke" or "fill". Stroke draw like a border, fill make the circle plain. If you choose "fill" parameter, you will have another parameter, the color. Can be hexadecimal or HTML color name
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer5",
ahead: "fill red",
frequency: 10,
iteration: 0
});
})
If you choose stroke, you will have to add an another parameter, a number, before color, for designating the border thickness.
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer6",
ahead: "stroke 30 tomato",
frequency: 10,
iteration: 0
});
})
In the same way as ahead, there is behind parameter, giving you the abilities to skinn the background! And, of course, never forget you can use any svg or pic in css background of a canvas!
var chronoCanvas = require('chronoCanvas');
document.addEventListener('DOMContentLoaded', function(){
chronoCanvas({
canvasTarget: ".chronometer7",
behind: "stroke 30 #666",
ahead: "stroke 30 #FF6347",
frequency: 10,
iteration: 0
});
})