-
Notifications
You must be signed in to change notification settings - Fork 0
/
shape.html
31 lines (29 loc) · 1.07 KB
/
shape.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
<html>
<head><title>Class Inheritance and the HTML5 Canvas</title></head>
<body>
<center>
<h2>Class Inheritance and the HTML5 Canvas</h2>
<canvas id="canvas" width="535" height="200"></canvas>
</center>
<script src="Shape.js"></script>
<script src="Triangle.js"></script>
<script src="Rectangle.js"></script>
<script>
var canvas = document.getElementById("canvas"),
shape1 = new Shape("Star", [50,0, 64,30, 97,35, 73,57, 79,90, 50,75, 21,90, 27,57, 3,35, 36,30], canvas),
shape2 = new Shape("Triangle", [0,0, 100,0, 50,100], canvas),
shape3 = new Triangle([0,0, 100,0, 50,100], canvas),
shape4 = new Rectangle([0,0, 110,0, 110,100, 0, 100], canvas);
var shapes = [shape1, shape2, shape3, shape4];
for (var i = 0; i < shapes.length; i++)
{
// keep things simple with explicit references and variables
//
var shape = shapes[i],
area = shape.getArea(),
baseArea = Shape.prototype.getArea.call(shape);
shape.drawAt(140 * i, 10, "Area: " + area + " (" + baseArea + ")");
}
</script>
</body>
</html>