-
Notifications
You must be signed in to change notification settings - Fork 1
/
andy001.html
117 lines (88 loc) · 2.74 KB
/
andy001.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
<body>
<script>
var print = function (x) {
var d = document.createElement('div')
d.innerHTML = x
document.body.appendChild(d)
}
print("Welcome to symmetry world! touch to draw and press reset to erace!")
var tau = Math.PI*2
function sin(x) { return Math.sin(x) }
function cos(x) { return Math.cos(x) }
var canvas = document.createElement('canvas');
canvas.style.border = "5px solid black"
canvas.width = 500
canvas.height = 500
document.body.append(canvas)
var context = canvas.getContext('2d');
var mouse_is_down = false
var start_x = 250
var start_y = 250
canvas.onmousedown = function (e) {
start_x = e.clientX
start_y = e.clientY
mouse_is_down = true
}
canvas.onmtouchdown = function (e) {
start_x = e.touches[0].clientX
start_y = e.touches[0].clientY
mouse_is_down = true
}
canvas.onmousemove = function (e) {
if (mouse_is_down) {
context.beginPath()
context.moveTo(start_x, start_y)
context.lineTo(e.clientX, e.clientY)
context.moveTo(start_y, start_x)
context.lineTo(e.clientY, e.clientX)
context.moveTo(500 - start_x, 500 - start_y)
context.lineTo(500 - e.clientX,500 - e.clientY)
context.moveTo(500 - start_y, 500 - start_x)
context.lineTo(500 - e.clientY,500 - e.clientX)
context.stroke()
start_x = e.clientX
start_y = e.clientY
}
}
canvas.onmtouchmove = function (e) {
var x = e.touches[0].clientX
var y = e.touches[0].clientY
if (mouse_is_down) {
context.beginPath()
context.moveTo(start_x, start_y)
context.lineTo(x, y)
context.moveTo(start_y, start_x)
context.lineTo(y, x)
context.moveTo(500 - start_x, 500 - start_y)
context.lineTo(500 - x, 500 - y)
context.moveTo(500 - start_y, 500 - start_x)
context.lineTo(500 - y, 500 - x)
context.stroke()
start_x = x
start_y = y
}
}
canvas.onmouseup = function (e) {
mouse_is_down = false
}
document.onkeydown = function (e) {
if (e.keyCode == 32) {
context.clearRect(0, 0, 500, 500)
}
}
var b = document.createElement('button');
b.innerHTML = "reset"
document.body.append(b)
b.onclick = function (e) {
context.clearRect(0, 0, 500, 500)
}
var a = document.createElement('button');
a.innerHTML = "change color"
document.body.append(a)
a.onclick = function (e) {
context.strokeStyle = 'rgb(' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ')';
}
print('rgb(' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ',' + Math.floor(Math.random()*255) + ')'
)
</script>
</body>