书籍名称：HTML5-Animation-with-JavaScript
书籍源码：https://github.com/lamberta/html5-animation
1.要求两点间的距离，只需要在直线上构建一个直角三角形，然后用勾股定理。如下图：
2.代码如下
10-distance.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Distance</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <textarea id="log"></textarea> <aside>Refresh page for another calculation.</aside> <script src="../include/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>
2.点到鼠标的距离，原理也是一样。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Mouse Distance</title> <link rel="stylesheet" href="../include/style.css"> </head> <body> <header> Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a> </header> <canvas id="canvas" width="400" height="400"></canvas> <textarea id="log"></textarea> <aside>Move mouse on canvas element.</aside> <script src="../include/utils.js"></script> <script> window.onload = function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), mouse = utils.captureMouse(canvas), log = document.getElementById('log'), rect = {x: canvas.width / 2, y: canvas.height / 2}; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); var dx = rect.x - mouse.x, dy = rect.y - mouse.y, dist = Math.sqrt(dx * dx + dy * dy); //draw square context.fillStyle = "#000000"; context.fillRect(rect.x - 2, rect.y - 2, 4, 4); //draw line context.beginPath(); context.moveTo(rect.x, rect.y); context.lineTo(mouse.x, mouse.y); context.closePath(); context.stroke(); //log output of distance value to screen log.value = "distance: " + dist; }()); }; </script> </body> </html>