-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (94 loc) · 2.3 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Spin</title>
</head>
<body onload="init();" style="margin:0;overflow:hidden;">
<canvas id="mycanvas"></canvas>
<script>
const canvas=document.getElementById("mycanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const portrait=canvas.height>canvas.width;
const r=portrait?canvas.height/4:canvas.width/4;
const ctx=canvas.getContext("2d");
const wheel=new Image();
const arrow=new Image();
const angol=new Image();
var images=3;
function init() {
console.log("Start...");
wheel.onload=wait;
arrow.onload=wait;
angol.onload=wait;
wheel.src="spin.jpg";
arrow.src="arrow.png";
angol.src="angol.png";
}
function wait() {
images--;
if (images==0) main();
}
function main() {
console.log("Loaded...");
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI);
ctx.clip();
// ctx.drawImage(wheel,-r,-r,2*r,2*r);
animate();
}
var alpha=1;
var step=0;
var limit=0;
var state="stage0";
var wheelangle=15*Math.random()*2*Math.PI/15;
var arrowangle=0;
function animate() {
wheelangle+=2*Math.PI/alpha;
arrowangle-=2*Math.PI/(2*alpha);
ctx.rotate(wheelangle);
ctx.drawImage(wheel,-r,-r,2*r,2*r);
ctx.rotate(-wheelangle);
ctx.rotate(arrowangle);
ctx.drawImage(arrow,-r,-r,2*r,2*r);
ctx.rotate(-arrowangle);
step++;
if (state=="stage0") {
if (step>limit) {
limit+=100+100*Math.random();
state="stage1";
}
}
else if (state=="stage1") {
alpha++;
if (step>limit) {
limit+=100+200*Math.random();
state="stage2";
}
}
else if (state=="stage2") {
alpha*=1.03;
if (step>limit) {
limit+=50+50*Math.random();
state="stage3";
}
}
if (state!="stage3") window.requestAnimationFrame(animate);
else {
ctx.restore();
ctx.translate(portrait?r:3*r,portrait?3*r:r);
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI);
ctx.clip();
ctx.rotate(wheelangle);
ctx.drawImage(wheel,-r,-r,2*r,2*r);
ctx.rotate(0.583*Math.PI);
var q=0.975;
ctx.drawImage(angol,-q*r+5,-q*r+5,2*q*r,2*q*r);
}
}
</script>
</body>
</html>