├── style.css
├── readme.md
├── index.html
└── script.js
/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | background: #fff;
6 | }
7 |
8 | #pietimerholder {
9 | border : 1px solid #f90;
10 | text-align : center;
11 | padding : 2em;
12 | margin : 2em;
13 | }
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Canvas Pie Timer
2 |
3 | ## Post
4 |
5 | - [https://f90.co.uk/labs/canvas-pie-timer/](https://f90.co.uk/labs/canvas-pie-timer/)
6 |
7 | ## Example
8 |
9 | - [http://orangespaceman.github.io/canvas-pie-timer](http://orangespaceman.github.io/canvas-pie-timer)
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Canvas Pie Timer
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file creates a canvas pie chart that slowly fills over time, before triggering another function
3 | */
4 |
5 | var canvasPieTimer = {
6 |
7 | // int: the canvas size (also used for circle radius and positioning)
8 | canvasSize : null,
9 |
10 | // object: the html canvas area
11 | canvas : null,
12 |
13 | // object : the interval between pie fills
14 | canvasInterval : null,
15 |
16 | // int : the time between updates (in milliseconds)
17 | timeInterval : 100,
18 |
19 | // int : the time elapsed, (when it gets to timeLimit it triggers a refresh)
20 | timeElapsed : 0,
21 |
22 | // int : the timeLimit on which to trigger a refresh
23 | timeLimit : 60000,
24 |
25 | // angle to start the wedge from
26 | startAngle : -Math.PI/2,
27 |
28 | // int (float) : size of wedge to add each time
29 | wedgeSize : null,
30 |
31 | // string : the colours with which to fill the pie
32 | fillColour : "black",
33 | bgColour : "orange",
34 |
35 |
36 | /*
37 | * start the process
38 | */
39 | init: function(canvasSize, canvasId, parentId){
40 |
41 | // not fully supported in IE as yet, so don't proceed on this occasion...
42 | if(window.attachEvent) {
43 | return false;
44 | }
45 |
46 | // set the canvas size for the object - used again later
47 | this.canvasSize = canvasSize;
48 |
49 | // Create a canvas element
50 | this.canvas = this.createCanvas(canvasId, this.canvasSize);
51 |
52 | // Add it to the document
53 | var parent = document.getElementById(parentId);
54 | parent.appendChild(this.canvas);
55 |
56 | this.wedgeSize = (this.timeInterval / this.timeLimit) * Math.PI * 2;
57 |
58 | // update the timer every x of a second
59 | this.canvasInterval = setInterval('canvasPieTimer.updatePie()', this.timeInterval);
60 | },
61 |
62 |
63 | /*
64 | * create a canvas element of specific size
65 | */
66 | createCanvas: function(id, canvasSize) {
67 |
68 | // create the canvas
69 | var canvas = document.createElement("canvas");
70 | canvas.id = id;
71 | canvas.width = canvasSize;
72 | canvas.height = canvasSize;
73 |
74 | // get the size of the outer circle
75 | var drawX = drawY = radius = this.canvasSize / 2;
76 |
77 | // draw the outer circle
78 | var draw = canvas.getContext("2d");
79 | draw.globalAlpha = 1;
80 | draw.beginPath();
81 | draw.arc(drawX, drawY, radius, 0, Math.PI*2, true);
82 | draw.fillStyle = this.bgColour;
83 | draw.fill();
84 |
85 | return canvas;
86 | },
87 |
88 |
89 | /*
90 | * Update the pie with the current time elapsed
91 | */
92 | updatePie: function() {
93 |
94 | // check to see whether we have filled the timer - remove time interval to stop overlap
95 | if (this.timeElapsed >= (this.timeLimit)) {
96 | clearInterval(this.canvasInterval);
97 |
98 | // call a function once finished
99 | this.doSomething();
100 | }
101 |
102 | // point(s) to start the drawing, half the canvas size
103 | var drawX = drawY = radius = this.canvasSize / 2;
104 |
105 | // Calculate the end angle
106 | var endAngle = this.startAngle + this.wedgeSize;
107 |
108 | // add current wedge
109 | var draw = this.canvas.getContext("2d");
110 | draw.beginPath();
111 | draw.moveTo(drawX,drawY);
112 | draw.arc(drawX, drawY, radius, this.startAngle, endAngle, false);
113 | draw.closePath();
114 | draw.fillStyle = this.fillColour;
115 | draw.fill();
116 |
117 | // increment elapsed time
118 | this.timeElapsed = this.timeElapsed + this.timeInterval;
119 |
120 | // calculate the new wedge size
121 | this.wedgeSize = (this.timeElapsed / this.timeLimit) * Math.PI * 2;
122 |
123 | },
124 |
125 |
126 | /*
127 | * do something once the pie is full
128 | */
129 | doSomething: function(){
130 | //alert('finished!');
131 | }
132 | }
--------------------------------------------------------------------------------