HTML and CSS Reference
In-Depth Information
function draw (triangle) {
triangle.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
angleX = (mouse.y - vpY) * 0.0005;
angleY = (mouse.x - vpX) * 0.0005;
points.forEach(move);
triangles.forEach(draw);
}());
Here, all the triangles are iterated over and passed to the
draw
function, which in turn calls the
draw
method of each triangle. That's all there is to it! The triangle begins a fill based on its defined color, moves
to the position of the first point, draws its shape, and ends the fill. You can see the results of this example
in Figure 16-12.
Figure 16-12.
The A shape
And, here's the entire code listing for document
06-triangles.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Triangles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="point3d.js"></script>
<script src="triangle.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
points = [],
triangles = [],
