js记录用户访问页面轨迹并绘制出来
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
.stage{
}
.track-monitor{
background-color:orange;
}
.track-pad{
height:200px;
background-color:green;
}
.track-coordinate{
background-color:purple;
color:white;
height:25px;
line-height:25px;
font-size:12px;
}
.track-coordinate-list{
font-size:12px;
width:100%;
word-break:break-word;
}
</style>
<script>
window.addEventListener('load',function(){
var pad = document.getElementsByClassName('track-pad')[0];
var monitor = document.getElementsByClassName('track-monitor')[0];
var coordinate = document.getElementsByClassName('track-coordinate')[0];
var clist = document.getElementsByClassName('track-coordinate-list')[0];
var reset = document.getElementsByTagName('button')[0];
var fixSize = function(){
monitor.width = window.innerWidth;
};
var context = monitor.getContext('2d');
var cset = [];
window.addEventListener('resize',function(){ fixSize(); });
pad.addEventListener('mousemove',function(e){
context.strokeStyle = 'white';
context.lineTo(e.x,e.y);
context.stroke();
coordinate.innerHTML = e.x+':'+e.y;
cset.push(coordinate.innerHTML);
clist.innerHTML = cset.join(',');
});
reset.addEventListener('click',function(){
fixSize();
cset = [];
clist.innerHTML = '';
coordinate.innerHTML='在绿色的方块中滑动鼠标';
});
fixSize();
});
</script>
</head>
<body>
<div class="stage">
<div class="track-pad"></div>
<canvas width="100" height="200" class="track-monitor"></canvas>
<div class="track-coordinate">在绿色的方块中滑动鼠标</div>
<button>重置</button>
<div class="track-coordinate-list"></div>
</div>
</body>
</html>
运行代码
开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明js记录用户鼠标访问页面轨迹并绘制出来！
