AnimateJs/circle.js at master · gopi1410/AnimateJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/****************************************************************************
PARAMETERS: lineWidth, lineColour, divisions, duration, fill, fillColour, start, draw, stop

NOTE THAT divisions/totalTime should not exceed 100.
*****************************************************************************/

HTMLCanvasElement.prototype.animateCircle=function(x,y,r,params) {
	if(params)
		initCircle(this,x,y,r,params.lineColour,params.lineWidth,params.divisions,params.duration,params.fill,params.fillColour,params.start,params.draw,params.stop);
	else
		initCircle(this,x,y,r);
};

function initCircle(id,x,y,r,lineColor,lineWidth,interval,totalTime,fill,fillColor,start,draw,stop)
{
	if(!interval)
		interval=100;
	if(!totalTime)
		totalTime=1
	var canvasId=id;
	var context=canvasId.getContext('2d');

	var data=[];
	var i=0;
	for(i=0;i<=interval;i++)
	{
		data[i]=i*(2*Math.PI/interval);
	}
	if(start)
		start();
	if(fill==="fillBefore")
	{
		context.beginPath();
		if(fillColor)
			context.fillStyle=fillColor;
		context.arc(x,y,r,0,2*Math.PI);
		context.fill();
		context.closePath();
	}

	context.beginPath();
	if(lineColor)
		context.strokeStyle=lineColor;
	if(lineWidth)
		context.lineWidth=lineWidth;
	else
		lineWidth=1;
	i=0;
	var length=data.length;
	var pid = setInterval(function() {
		context.arc(x,y,r,data[i],data[i+1]);
		context.stroke();
		if(draw)
			draw();
		if(i++===length)
		{
			context.closePath();
			clearInterval(pid);
			if(fill==="fillAfter")
			{
				context.beginPath();
				if(fillColor)
					context.fillStyle=fillColor;
				context.arc(x,y,r-(lineWidth/2),0,2*Math.PI);
				context.fill();
				context.closePath();
			}
			if(stop)
			{
				stop();
			}
		}
	}, (1000*totalTime/interval));
}