-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
119 lines (106 loc) · 5.54 KB
/
sample.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
118
119
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="./dist/unitary.js"></script> <!-- ライブラリ本体 -->
<script src="./dist/canvas.js"></script>
<script>
const {Circle, Graph, Group, Image: Image_, Line, Point, Polygon, Rect, Segment, Text: Text_, Triangle} = Unitary;
const A = new Point(30,30),
B = new Point(90,90),
AB = new Line(A, B),
SegAB = new Segment(A, B),
circleC = new Circle(A, 30),
C = new Point(90,40),
D = new Point(60,20),
ABC = new Triangle(A, B, C),
ABCD = new Polygon(A, B, C, D),
rectAB = new Rect(A, B),
circumcircleABC = ABC.getCircumcircle(),
incircleABC = ABC.getIncircle();
const canvas = {};
for (const val of ['circle', 'line', 'segment', 'polygon', 'triangle', 'rect', 'pentagon', 'logo', 'graph', 'star']) {
canvas[val] = new Canvas(val);
}
canvas.circle.add(circleC);
canvas.circle.add(circleC.Origin);
canvas.circle.add(new Text_('O', circleC.Origin));
const group = new Unitary.Group(AB, new Line(new Point(20, 0), new Point(20,20)), new Line(new Point(0, 20), new Point(20,20)));
// canvas.line.add(AB);
// canvas.line.add(new Line(new Point(20, 0), new Point(20,20)));
// canvas.line.add(new Line(new Point(0, 20), new Point(20,20)));
canvas.line.add(group);
canvas.segment.add(SegAB);
canvas.polygon.add(ABCD);
canvas.triangle.add(circumcircleABC.setFillColor('#BB7C00'));
canvas.triangle.add(ABC.setFillColor('#E89B00'));
canvas.triangle.add(incircleABC.setFillColor('#FFA900'));
canvas.rect.add(rectAB);
canvas.pentagon.add(
new Polygon(
new Point(Math.cos(2 * Math.PI * (1/5) + Math.PI / 2) * 30 + 30, Math.sin(2 * Math.PI * (1/5) + Math.PI / 2) * 30 + 30),
new Point(Math.cos(2 * Math.PI * (2/5) + Math.PI / 2) * 30 + 30, Math.sin(2 * Math.PI * (2/5) + Math.PI / 2) * 30 + 30),
new Point(Math.cos(2 * Math.PI * (3/5) + Math.PI / 2) * 30 + 30, Math.sin(2 * Math.PI * (3/5) + Math.PI / 2) * 30 + 30),
new Point(Math.cos(2 * Math.PI * (4/5) + Math.PI / 2) * 30 + 30, Math.sin(2 * Math.PI * (4/5) + Math.PI / 2) * 30 + 30),
new Point(Math.cos(2 * Math.PI * (5/5) + Math.PI / 2) * 30 + 30, Math.sin(2 * Math.PI * (5/5) + Math.PI / 2) * 30 + 30)
).setFillColor('#ccc')
);
canvas.logo.mode = 'normal';
canvas.logo.add(new Image_('./logo.png', new Point(0, 0)));
const scale = 20;
canvas.graph.origin = new Point(100, 10);
canvas.graph.add(Unitary.XAxis);
canvas.graph.add(Unitary.YAxis);
// canvas.graph.add(new Line(new Point(1 * scale, 0), new Point(1 * scale, 1 * scale)).setStrokeColor('#ddd'));
// canvas.graph.add(new Line(new Point(0, 1 * scale), new Point(1 * scale, 1 * scale)).setStrokeColor('#ddd'));
canvas.graph.add(new Graph(function(x) {return x * x}, 20));
canvas.graph.add(new Text_('1', new Point(1 * scale,4)).setAlign('center'));
canvas.graph.add(new Text_('5', new Point(5 * scale,4)));
canvas.graph.add(new Text_('1', new Point(0,1 * scale)));
const r = 30;
const goldenRatio = 1 + (1 + Math.sqrt(5)) / 2;
const star = new Triangle(
new Point(Math.cos(1 / 2 * Math.PI) * r, Math.sin(1 / 2 * Math.PI) * r),
new Point(Math.cos(1 / 2 * Math.PI + 2 / 3 * Math.PI) * r, Math.sin(1 / 2 * Math.PI + 2 / 3 * Math.PI) * r),
new Point(Math.cos(1 / 2 * Math.PI + 4 / 3 * Math.PI) * r, Math.sin(1 / 2 * Math.PI + 4 / 3 * Math.PI) * r)
).move(100, 100);
const theta = 2 * Math.PI / 5;
const star2 = new Polygon(
new Point(r * Math.cos(theta * 0 + Math.PI / 2), r * Math.sin(theta * 0 + Math.PI / 2)),
new Point(r / goldenRatio * Math.cos(theta * 3 - Math.PI / 2), r / goldenRatio * Math.sin(theta * 3 - Math.PI / 2)),
new Point(r * Math.cos(theta * 1 + Math.PI / 2), r * Math.sin(theta * 1 + Math.PI / 2)),
new Point(r / goldenRatio * Math.cos(theta * 4 - Math.PI / 2), r / goldenRatio * Math.sin(theta * 4 - Math.PI / 2)),
new Point(r * Math.cos(theta * 2 + Math.PI / 2), r * Math.sin(theta * 2 + Math.PI / 2)),
new Point(r / goldenRatio * Math.cos(theta * 0 - Math.PI / 2), r / goldenRatio * Math.sin(theta * 0 - Math.PI / 2)),
new Point(r * Math.cos(theta * 3 + Math.PI / 2), r * Math.sin(theta * 3 + Math.PI / 2)),
new Point(r / goldenRatio * Math.cos(theta * 1 - Math.PI / 2), r / goldenRatio * Math.sin(theta * 1 - Math.PI / 2)),
new Point(r * Math.cos(theta * 4 + Math.PI / 2), r * Math.sin(theta * 4 + Math.PI / 2)),
new Point(r / goldenRatio * Math.cos(theta * 2 - Math.PI / 2), r / goldenRatio * Math.sin(theta * 2 - Math.PI / 2))
).move(40, 40).setFillColor('yellow');
canvas.star.add(star);
canvas.star.add(star2);
canvas.star.add(star.rotate(Math.PI));
for (const c of Object.values(canvas)) {
c.draw();
}
</script>
<style>
canvas {
border:2px solid #666;
}
</style>
</head>
<body>
<canvas id="circle" width="200" height="200"></canvas>
<canvas id="line" width="200" height="200"></canvas>
<canvas id="segment" width="200" height="200"></canvas>
<canvas id="polygon" width="200" height="200"></canvas>
<canvas id="triangle" width="200" height="200"></canvas>
<canvas id="rect" width="200" height="200"></canvas>
<canvas id="pentagon" width="200" height="200"></canvas>
<canvas id="logo" width="200" height="200"></canvas>
<canvas id="graph" width="200" height="200"></canvas>
<canvas id="star" width="200" height="200"></canvas>
</body>
</html>