マウストラッカー

■追跡側
trackerObj = new Object();
trackerObj.userID = (new Date()).getTime() + Math.floor(Math.random() * 100);
trackerObj.list = [];
trackerObj.getPointerXY = function(evt) {
trackerObj.list.push(Event.pointerX(evt)+","+Event.pointerY(evt));
$("result").innerHTML = Event.pointerX(evt)+","+Event.pointerY(evt);
trackerObj.save();
}
trackerObj.save = function() {
var xy = trackerObj.list.shift();
var url = "save.cgi?userID="+trackerObj.userID+"&xy="+xy;
new Ajax.Request(url, { method:"get" });
}
window.onload = function() {
Event.observe(document.body, "mousemove",trackerObj.getPointerXY, true);
}

---

■解析側
plotObj = new Object();
plotObj.filename = "tmp/"+prompt("filename")+".txt";
plotObj.plot = function() {
var cacheTime = "?cache="+(new Date()).getTime();
new Ajax.Request(plotObj.filename+cacheTime, { method: "get", onComplete: plotObj.draw });
}
plotObj.draw = function(httpObj) {
var LF = String.fromCharCode(10);
var txt = httpObj.responseText;
var canvasObj = document.getElementById("plotArea");
var conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(255,255,200,1)";
conObj.fillRect(0,0,1600,2400); // キャンバスを消去
var data = txt.split(LF);
var oldX = data[0].split(",")[0];
var oldY = data[0].split(",")[1];
for (var i=0; i<data.length; i++) {
var x = data[i].split(",")[0];
var y = data[i].split(",")[1];
var a = Math.floor(255/data.length * i);
plotObj.drawLine(oldX, oldY, x, y,a);
oldX = x;
oldY = y;
}
}
plotObj.drawLine = function(x1,y1,x2,y2,s)
{
var canvasObj = document.getElementById("plotArea");
var conObj = canvasObj.getContext("2d");
conObj.strokeStyle = "rgba("+(255-s)+",0,"+s+",1)";
conObj.lineWidth = 1;
conObj.beginPath();
conObj.moveTo(x1,y1);
conObj.lineTo(x2,y2);
conObj.closePath();
conObj.stroke();
}
window.onload = plotObj.plot;
window.onclick = function() { plotObj.filename = "tmp/"+prompt("filename")+".txt"; plotObj.plot(); }

・サンプル1をダウンロード
・サンプル2をダウンロード

　説明などは本書を参考にしてください。JavaScript以外のソースはデータをダウンロードするか本書を参照してください。