-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCOMP2013Task2.html
121 lines (107 loc) · 2.36 KB
/
COMP2013Task2.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
120
121
<!DOCTYPE HTML>
<html>
<head>
<title>Task2</title>
<style>
h1
{
text-align: center;
}
h2
{
text-align: center;
}
h3
{
text-align: center;
}
p
{
text-align: center;
}
#timedate
{
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
}
#frame
{
width: 50%;
height: 750px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="c" width="900" height="900" class="lower-canvas" style="width: 900px; height: 900px;"></canvas>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script>
(function() {
var canvas = new fabric.Canvas('c');
var startX = 100;
var startY = 100;
var speed = 3;
// create a triangle object
var triangle = new fabric.Triangle({
left: startX,
top: startY,
fill: 'red',
width: 20,
height: 20,
angle: 0
});
function reset() {
canvas.clear();
triangle.set({ left: startX, top: startY });
triangle.setAngle(0);
canvas.add(triangle);
canvas.renderAll();
}
// "add" triangle onto canvas
canvas.add(triangle);
function move(direction) {
//Calculate new coords
var y = Math.cos(triangle.getAngleInRadians()) * -direction;
var x = Math.sin(triangle.getAngleInRadians()) * direction;
//Set
triangle.set({ left: triangle.left + x, top: triangle.top + y });
var path = new fabric.Path('M 0 0 L 0 1 L 1 1 L 1 0 Z');
path.set({ left: triangle.left, top: triangle.top });
canvas.add(path);
triangle.bringToFront();
}
fabric.Object.prototype.getAngleInRadians = function() {
return this.getAngle() / 180 * Math.PI;
};
function rotate(direction) {
triangle.setAngle (triangle.getAngle() + direction);
}
var keyCodes = [];
document.onkeydown = document.onkeyup = function(e){
e = e || event;
keyCodes[e.keyCode] = e.type == 'keydown';
if (keyCodes[38]) {
move(speed);
}
if (keyCodes[40]) {
move(-speed);
}
if (keyCodes[37]) {
rotate(-speed);
}
if (keyCodes[39]) {
rotate(speed);
}
if (keyCodes[32]) {
reset();
}
canvas.renderAll();
}
})();
</script>
</body>
</htmal>