-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcircle.html
117 lines (95 loc) · 2.15 KB
/
circle.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
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" class="droppable" width="400" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var sum = 0 ;
var ran_values = [];
for(var i=0;i<4;i++)
{
var t = i + 1 ;
var x = {"value":t,"startX":'',"startY":'','angle':''};
ran_values.push(x);
sum = sum + t ;
}
console.log(ran_values);
var gen_values = [];
//var sum = ran_values.reduce((a, b) => a + b, 0);
for(var i=0;i<ran_values.length;i++)
{
let x = (ran_values[i].value / sum) * 100 ;
gen_values[i] = (x * 6.28) / 100 ;
}
console.log(gen_values);
var c = document.getElementById("myCanvas");
var ctx = [] ;
var temp = 0;
var dots = [];
var temp_end = gen_values[0];
for(var i=0;i<ran_values.length;i++)
{
ctx[i] = c.getContext("2d");
ctx[i].beginPath();
var startangle = temp;
var endangle = gen_values[i] + startangle;
ctx[i].arc(200,200, 100,startangle,endangle);
ctx[i].lineWidth = 50;
ctx[i].strokeStyle = random_rgba();
ctx[i].stroke();
ran_values[i].startX = 100 * Math.cos(startangle) + 200;
ran_values[i].startY = 100 * Math.sin(startangle) + 200;
var diffX = ran_values[i].startX - 200;
var diffY = ran_values[i].startY - 200;
var angle = ( Math.atan2(diffY, diffX) ) * (180/Math.PI) ;
if(Math.sign(angle)<0)
{
let x = angle + 180 ;
angle = 180 + x ;
}
ran_values[i].angle = angle ;
temp=endangle;
}
console.log(ran_values)
function random_rgba() {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}
function test(event)
{
console.log(event.clientX,event.clientY);
var diffX = event.clientX - 200;
var diffY = event.clientY - 200;
var angle = Math.atan2(diffY, diffX);
angle = angle * (180/Math.PI);
// console.log(angle);
if(Math.sign(angle) < 0)
{
let x = angle + 180 ;
angle = 180 + x ;
}
for(var i=0;i<ran_values.length;i++)
{
var j ;
if(i==ran_values.length-1)
{
j=360;
}
else
{
j = ran_values[i+1].angle;
}
var k = ran_values[i].angle;
if(angle > k && angle < j)
{
c.title = ran_values[i].value ;
break;
}
}
}
document.addEventListener("mousemove", test);
</script>
</body>
</html>