HTML and CSS Reference
In-Depth Information
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea id="log"></textarea>
<script src="utils.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
log = document.getElementById('log');
//Create a black square, assign random position.
var rect1 = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height
};
context.fillStyle = "#000000";
context.fillRect(rect1.x - 2, rect1.y - 2, 4, 4);
//Create a red square, assign random position.
var rect2 = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height
};
context.fillStyle = "#ff0000";
context.fillRect(rect2.x - 2, rect2.y - 2, 4, 4);
//Calculate the distance between the two squares.
var dx = rect1.x - rect2.x,
dy = rect1.y - rect2.y,
dist = Math.sqrt(dx * dx + dy * dy);
//log output of distance value to screen
log.value = "distance: " + dist;
};
</script>
</body>
</html>
Run this file in your web browser and you will see the distance between the two rectangles printed out to
the
textarea
element in our document. Each time you run it, the two rectangles will be in different
positions. It shouldn't matter if one is to the right, left, top, or bottom of the other, you'll always get a
positive value for the distance.
Well that's interesting, but not dynamic. Just to show you that you can do this in real time, try the next
example,
11-mouse-distance.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mouse Distance</title>
<link rel="stylesheet" href="style.css">
</head>