HTML and CSS Reference
In-Depth Information
slider = new Slider(-90, 90, 0);
segment.x = 100;
segment.y = 100;
slider.x = 300;
slider.y = 20;
slider.captureMouse(canvas);
slider.onchange = drawFrame;
function drawFrame () {
context.clearRect(0, 0, canvas.width, canvas.height);
segment.rotation = slider.value * Math.PI / 180;
segment.draw(context);
slider.draw(context);
}
drawFrame(); //call once for initial display
};
</script>
</body>
</html>
In this example, whenever the slider is moved, it calls the function that's assigned as its
slider.onchange
method—here,
drawFrame
—which sets the rotation of
segment
to the slider's value. Try that out, and you
should see something like Figure 13-2. If it all works, you completed the first phase of forward kinematics.
Figure 13-2.
It moves!
Moving Two Segments
Now that we've set up a single segment to rotate with a slider, we can move on to something a little more
exciting … two segments! Rename the the original slider and segment to
slider0
and
segment0
,
respectively. Create another instance of
Segment
, name it
segment1
, and also create another slider
instance and call it
slider1
. The new slider will control the rotation of the new segment, which is
positioned at the point returned by the
getPin()
method of
segment0
. Here's the code for example
03-
two-segments.html
:
<!doctype html>
<html>
