HTML and CSS Reference
In-Depth Information
0
1
0
1
10
8
10
9
9
2
6
5
8
3
5
4
7
4
2
7
6
3
Figure 16-11.
The points and polygons that make up this shape
When you graph all the points, you get the following values:
points[0] = new Point3d( -50, -250, 100);
points[1] = new Point3d( 50, -250, 100);
points[2] = new Point3d( 200, 250, 100);
points[3] = new Point3d( 100, 250, 100);
points[4] = new Point3d( 50, 100, 100);
points[5] = new Point3d( -50, 100, 100);
points[6] = new Point3d(-100, 250, 100);
points[7] = new Point3d(-200, 250, 100);
points[8] = new Point3d( 0, -150, 100);
points[9] = new Point3d( 50, 0, 100);
points[10] = new Point3d( -50, 0, 100);
Next, you define the triangles. Each triangle is simply a list of three points, and we'll call them
a
,
b
, and
c
.
Make a Triangle class to keep track of the points for each triangle and give it a
draw
method so it knows
how to render itself to the canvas element. It's listed here, and you see how to use it in a moment (file
triangle.js
):
function Triangle (a, b, c, color) {
this.pointA = a;
this.pointB = b;
this.pointC = c;
this.color = (color === undefined) ? "#ff0000" : utils.parseColor(color);
this.lineWidth = 1;
this.alpha = 1;
}
