-
Notifications
You must be signed in to change notification settings - Fork 0
/
ball.html
112 lines (107 loc) · 2.91 KB
/
ball.html
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
<head></head>
<body>
<canvas width="800" height="800" style="border:1px dashed grey;" id="canvasId"></canvas>
<script language="javascript" src="data.js"></script>
<script language="javascript">
function getCircleGraph(group, ladder){
var circles = [];
var orbit = [];
var angle = 0, lastAngle=0;
var pos = {};
var x=0, y=0 ;
var radius = 0;
var start_angle=0;
var last_start_angle = 0;
for(var i=0;i<group.length;i++){
var startAngle = lastAngle;
angle = (Math.PI*2)/group[i].length;
start_angle = angle/2;
lastAngle = angle;
radius += i>1?ladder[i]+ladder[i-1]+1:1+ladder[i];
orbit.push(radius);
for(var j=0;j<group[i].length;j++){
pos = {
x:i>0?Math.cos(last_start_angle+start_angle+(j)*angle)*radius:0,
y:i>0?Math.sin(last_start_angle+start_angle+(j)*angle)*radius:0,
r:ladder[i]
};
circles.push({"pos":pos, data:group[i][j]});
}
last_start_angle = last_start_angle + start_angle;
}
return {circles:circles, orbit:orbit};
}
var canvas = document.getElementById('canvasId');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
var titleArray = [];
var x=400;y=400;
var color_i=0;
function draw(){
color_i = 0;
ctx.clearRect(0,0,canvas.width,canvas.height);
graph = getCircleGraph(groups, laddler);
orbit = graph['orbit'];
ctx.strokeStyle="rgba(30,30,30, 0.2)";
for(var i=0;i<orbit.length;i++){
ctx.beginPath();
ctx.arc(x,y,orbit[i],0,Math.PI*2 ,false); // Outer circle
ctx.closePath();
ctx.stroke();
}
circles = graph['circles'];
var offset = getOffset();
for(var i=0;i<circles.length;i++){
var pos = circles[i].pos;
var data = circles[i].data;
var color = getStyle();
ctx.fillStyle="rgba("+color[0]+", "+color[1]+", "+color[2]+", 0.5)";
ctx.strokeStyle="rgba("+color[0]+", "+color[1]+", "+color[2]+", 1)";
ctx.beginPath();
ctx.arc(pos.x+x+offset[0],pos.y+y+offset[1],pos.r,0,Math.PI*2 ,false); // Outer circle
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.fillStyle="#ff0000";
ctx.font="bold 15pt Calibri";
ctx.shadowColor="white";
ctx.shadowBlur = 10;
ctx.fillText(data.count,pos.x+x+offset[0],pos.y+y+offset[1]);
ctx.fillStyle="#000000";
ctx.font="normal 8pt Calibri";
ctx.shadowColor="white";
ctx.shadowBlur = 10;
ctx.fillText(data.name,pos.x+x+offset[0],pos.y+y+offset[1]+20);
}
}
function getStyle(){
var colors = [
[60,90,120],
[120,90,60],
[30,90,150],
[150,30,90],
[30,90,180],
[100,230,1],
[22,67,99],
[66,43,97],
[99,200,10],
[66,250,11]
];
color_i = (color_i+1) % 10;
return colors[color_i];
}
var pos_i=0;
function getOffset(){
var jj =[[1,1],[0,0],[-1,-1]]
pos_i=(pos_i+1)%3;
return jj[pos_i];
}
draw();
// window.setInterval(function(){
// draw();
// }, 1000);
</script>
</body>
</html>