如何在网页中捕获鼠标轨迹并输出

最新推荐文章于 2024-08-14 08:01:05 发布

akuibpt23191

最新推荐文章于 2024-08-14 08:01:05 发布

阅读量756

点赞数

原文链接：http://www.cnblogs.com/wodeboke-y/p/11180120.html

版权

如何在网页中捕获鼠标轨迹并输出

1. js捕获鼠标轨迹并输出

1.1. js脚本如下：

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>