HTML and CSS Reference
In-Depth Information
//draw the 2 "pins"
context.beginPath();
context.arc(0, 0, 2, 0, (Math.PI * 2), true);
context.closePath();
context.stroke();
context.beginPath();
context.arc(this.width, 0, 2, 0, (Math.PI * 2), true);
context.closePath();
context.stroke();
context.restore();
};
Segment.prototype.getPin = function () {
return {
x: this.x + Math.cos(this.rotation) * this.width,
y: this.y + Math.sin(this.rotation) * this.width
};
};
When you create a segment, you specify a width, a height, and an optional color, which draws a rounded
rectangle. It also adds a small circle at the origin point of the segment (0, 0) and one at the end point.
These are the two pins, where the segments attach to other segments. (You may also notice a couple of
properties, such as
vx
and
vy
, we'll discuss these later in the “Handling the Reaction” section.)
The following example creates a few segments with different widths and heights to give you an idea how
the
Segment
class is used (document
01-segment.html
), and is shown in Figure 13-1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Segment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="segment.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
segment0 = new Segment(100, 20),
segment1 = new Segment(200, 10),
segment2 = new Segment(80, 40);
segment0.x = 100;
segment0.y = 50;
segment0.draw(context);
segment1.x = 100;
segment1.y = 80;
segment1.draw(context);
