-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (74 loc) · 1.63 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
95
96
<!doctype html>
<html>
<head>
<style>
html, body, canvas {
overflow: hidden;
margin: 0;
padding: 0;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="c" width="800" height="500"></canvas>
<script>
var PI = Math.PI;
var cos = function(a) { return Math.cos(a*PI/180); };
var sin = function(a) { return Math.sin(a*PI/180); };
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var canvas = document.getElementById('c');
canvas.attributes.width.value = winWidth;
canvas.attributes.height.value = winHeight;
var ox = winWidth/2;
var oy = winHeight/2;
var ctx = canvas.getContext('2d');
ctx.translate(ox, oy);
var crtx = 0, crty = 0;
ctx.strokeStyle='#444';
drawTo(ox*4/5, 0);
drawTo(0, 0);
ctx.strokeStyle='#ccc';
var on = false;
canvas.addEventListener('mousedown', function(event) {
crtx = event.pageX - ox;
crty = event.pageY - oy;
on = true;
drawTo(crtx+1, crty+1);
});
document.addEventListener('mouseup', function() {
on = false;
})
canvas.addEventListener('mousemove', function(event) {
if(on) {
drawTo(event.pageX - ox, event.pageY - oy);
}
});
function drawTo(x, y) {
if(x === crtx && y === crty) {
return;
}
//ctx.rotate(0.1);
for(var a=0; a<360; a+=10) {
ctx.beginPath();
ctx.moveTo(rotx(crtx, crty, a), roty(crtx, crty, a));
ctx.lineTo(rotx(x, y, a), roty(x, y, a));
ctx.stroke();
ctx.beginPath();
ctx.moveTo(rotx(crtx, -crty, a), roty(crtx, -crty, a));
ctx.lineTo(rotx(x, -y, a), roty(x, -y, a));
ctx.stroke();
}
crtx = x;
crty = y;
}
function roty(x, y, a) {
return y*cos(a) - x*sin(a);
}
function rotx(x, y, a) {
return y*sin(a) + x*cos(a);
}
</script>
</body>
</html>