-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuild01.html
112 lines (89 loc) · 2.18 KB
/
build01.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
canvas { border:1px solid #000; }
</style>
<script type="text/javascript" src="CanvasDOM.js"></script>
</head>
<body>
<canvas id="test" width="600" height="400"></canvas>
<script type="text/javascript">
var doc = new CanvasDocument('test');
console.log(doc)
var b = doc.createPanel();
var b2 = doc.createPanel();
var b3 = doc.createPanel();
var c = doc.createCircle();
var c2 = doc.createCircle();
var c3 = doc.createCircle();
b.config.fillStyle =
b2.config.fillStyle =
b3.config.fillStyle =
c.config.fillStyle =
c2.config.fillStyle =
c3.config.fillStyle =
'rgba(255,255,0,0.1)';
//'rgba(0,0,0,0)';
b.moveTo(300, 200)
b2.moveTo(300, 200)
b3.moveTo(300, 200)
c.moveTo(300, 200)
c2.moveTo(300, 200)
c3.moveTo(300, 200)
doc.append(c);
doc.append(c2);
doc.append(c3);
doc.append(b);
doc.append(b2);
doc.append(b3);
c.scale(1, .5);
c2.scale(1, 2);
c3.scale(1, 1.5);
b.size(200, 200);
b2.size(200, 200);
b3.size(200, 200);
var deg = 0;
var scale = 1;
var button1 = doc.createPanel();
button1.moveTo(100, 120);
button1.content('click me');
var circle = doc.createCircle();
circle.moveTo(550, 50);
circle.content('click me');
var key, circleFn = function(){
this.removeEvent('mouseup', key);
circle.$moveTo(circle.config.x, 350, 1000, 'bounce_out', function(){
circle.$moveTo(circle.config.x, 50, 1000, 'elastic_out', function(){
key = circle.mouseup(circleFn);
});
}, 500);
}
key = circle.mouseup(circleFn);
var key2, buttonFn = function(){
this.removeEvent('mouseup', key2);
button1.$scaleTo(0.2, 0.2, 1000, 'bounce_out', function(){
button1.$scaleTo(1, 1, 1000, 'elastic_out', function(){
key2 = button1.mouseup(buttonFn);
});
}, 200);
}
key2 = button1.mouseup(buttonFn);
doc.append(circle);
doc.append(button1);
ani.reg(function(_c, _t, _i){
deg = (deg + 1) % 180;
scale = Math.cos(deg * Math.PI / 180);
b.rotate(deg).scale(scale, scale);
b2.rotate(-deg + 30).scale(scale, scale);
b3.rotate(deg * 2).scale(scale, scale);
scale = Math.sin(deg * Math.PI / 180);
c.size(scale * 50).rotate(deg);
c2.size(scale * 70).rotate(-deg - 30);
c3.size(scale * 90).rotate(deg - 60);
doc.draw();
})
</script>
</body>
</html>