HTML and CSS Reference
In-Depth Information
This function sets the rotation of the
segment
parameter, and then uses it to return an object with
x
and
y
properties based on our previous calculations for
tx
and
ty
. This allows you to call the
reach
function to
rotate a segment, and returns a target you can pass to the next call. So, the
drawFrame
function becomes
the following:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var target = reach(segment0, mouse.x, mouse.y);
reach(segment1, target.x, target.y);
segment0.draw(context);
segment1.draw(context);
}());
Here,
segment0
reaches toward the mouse, and
segment1
reaches toward
segment0
. We then move the
positioning code into its own function:
function position (segmentA, segmentB) {
segmentA.x = segmentB.getPin().x;
segmentA.y = segmentB.getPin().y;
}
Then you can position
segment0
on the end of
segment1
by calling:
position(segment0, segment1);
Here's the final code for
05-two-segment-reach.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Segment Reach</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'),
mouse = utils.captureMouse(canvas),
segment0 = new Segment(100, 20),
segment1 = new Segment(100, 20);
segment1.x = canvas.width / 2;
segment1.y = canvas.height / 2;
function reach (segment, xpos, ypos) {
