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
|
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
(function(){
var canvas = document.createElement("canvas")
var ctx = canvas.getContext("2d")
var w = canvas.width = 500
var h = canvas.height = 500
document.body.appendChild(canvas)
var rects = []
var dragging = false
var mouse = {x:0,y:0,w:0,h:0}
canvas.addEventListener("mousedown", function(e){
dragging = true
mouse.x = e.pageX
mouse.y = e.pageY
mouse.w = mouse.h = 0
})
canvas.addEventListener("mousemove", function(e){
if (dragging) {
mouse.w = e.pageX - mouse.x
mouse.h = e.pageY - mouse.y
}
else {
mouse.x = e.pageX
mouse.y = e.pageY
}
})
document.addEventListener("mouseup", function(e){
if (! dragging) return
dragging = false
rects.push(normalize(mouse))
mouse = {x:e.pageX,y:e.pageY,w:0,h:0}
})
function animate(){
requestAnimationFrame(animate)
ctx.fillStyle = "#fff"
ctx.fillRect(0,0,w,h)
solve_rects()
draw_rects()
draw_mouse()
}
animate()
function normalize(rect){
if (rect.w < 0) {
rect.x += rect.w
rect.w = abs(rect.w)
}
if (rect.h < 0) {
rect.y += rect.h
rect.h = abs(rect.h)
}
return rect
}
function solve_rects(){
}
function draw_rects(){
for (var i = 0; i < rects.length; i++) {
var rect = rects[i]
ctx.fillStyle = "rgba(0,200,220,0.5)"
ctx.fillRect(rect.x, rect.y, rect.w, rect.h)
}
}
function draw_mouse(){
if (mouse.w == 0 && mouse.h == 0) {
ctx.fillStyle = "rgba(255,0,0,0.4)";
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 5, 0, 2*Math.PI, false);
ctx.fill();
}
else {
ctx.fillStyle = "rgba(255,255,0,0.5)"
ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h)
}
}
})()
</script>
</html>
|
