Commits

catseye  committed 71462ef

This will become something more, someday...

  • Participants
  • Parent commits f85cba3

Comments (0)

Files changed (2)

File javascript/mouse-track.html

+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>Tracking the Mouse</title>
+  <script src="mouse-track.js"></script>
+  <style>
+#canvas { border: 1px solid blue; }
+  </style>
+</head>
+<body>
+
+<h1>Tracking the Mouse</h1>
+
+<div>
+<canvas id="canvas" width="640" height="100">
+Your browser doesn't support displaying an HTML5 canvas.
+</canvas>
+</div>
+
+<div>
+<button id="dump">Dump</button>
+</div>
+
+<p>As the mouse is moved across the canvas, its position
+at each point in time is recorded.  Clicking the "Dump" button displays
+these events in the Javascript console.</p>
+
+</body>
+<script>
+  var mt = MouseTracker(document.getElementById('canvas'));
+  mt.start();
+  document.getElementById('dump').onclick = function (e) { mt.dump(); }
+</script>

File javascript/mouse-track.js

+function MouseTracker(elem) {
+    var self = {};
+    var events = [];
+
+    self.start = function() {
+        elem.onmousemove = function(event) {
+            events.push(event);
+        };
+    };
+
+    self.offset = function() {
+        var o = elem;
+        var left = 0;
+        var top = 0;
+
+        while (o) {
+            left += o.offsetLeft;
+            top += o.offsetTop;
+            o = o.offsetParent;
+        }
+
+        return [left, top];
+    };
+
+    self.dump = function() {
+        var i;
+        var base = events[0].timeStamp;
+        var offs = self.offset();
+        for (i = 0; i < events.length; i++) {
+            var x = events[i].pageX - offs[0];
+            var y = events[i].pageY - offs[1];
+            var sec = (events[i].timeStamp - base) / 1000.0;
+            console.log("" + x + ", " + y + " @ " + sec);
+        }
+        events = [];
+    };
+
+    return self;
+}