如何在网页中捕获鼠标轨迹并输出
1. js捕获鼠标轨迹并输出
1.1. js脚本如下：
<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>
1.2. 解释
1.2.1. addEventListener
window.addEventListener(‘load‘,function(){
源自dom中的定义，addEventListener() 方法用于向指定元素添加事件句柄。
移除句柄使用 removeEventListener() 方法。
语法
element.addEventListener(event, function, useCapture)
参数值
|
参数 |
描述 |
|
event |
必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 支持所有HTML DOM事件，可以查看HTML DOM Event对象参考手册。 |
|
function |
必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
|
useCapture |
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行 |
冒泡型：
1.对于某个节点，触发的一个事件， 会首先执行当前这个dom节点绑定的方法
2.执行完毕后，会冒泡至改节点的父节点，执行相应的函数
3. 重复以上过程，直至Dom的根节点。
捕获型
事件捕获的顺序刚好与之相反
1.当一个事件发生时，最外层的已绑定该事件的方法会执行
2.然后该事件会下降至他的子节点，触发相应的方法
3.重复1,2的过程
实例
可以通过函数名来引用外部函数。
该实例演示了在用户点击 <button> 元素时如何执行函数:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML =
"Hello World";
}
可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。
该实例演示了如何在<button>元素中添加两个点击事件：
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click",
someOtherFunction);
可以在同一个元素中添加不同类型的事件。
该实例演示了如何在同一个 <button> 元素中添加多个事件：
document.getElementById("myBtn").addEventListener("mouseover",
myFunction);
document.getElementById("myBtn").addEventListener("click",
someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout",
someOtherFunction);
当传递参数值时，使用"匿名函数"调用带参数的函数：
document.getElementById("myBtn").addEventListener("click",
function() {
myFunction(p1, p2);
});
1.2.2.
var context =
monitor.getContext(‘2d‘);
var context = monitor.getContext(‘2d‘);
getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数contextID指定了您想要在画布上绘制的类型。当前唯一的合法值是"2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。
如果<canvas>标签以后支持3D绘图，getContext()方法可能允许传递一个"3d"字符串参数。
返回值
一个CanvasRenderingContext2D对象，使用它可以绘制到Canvas元素中。
描述
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2维、3 维）提供不同的环境。当前，唯一支持的是"2d"，它返回一个CanvasRenderingContext2D对象，该对象实现了一个画布所使用的大多数方法。
全部代码：
<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>
原文地址：https://www.cnblogs.com/wodeboke-y/p/11180120.html