今天去爬虫爬一个需要滑块验证码的网站的时候，发现滑动滑块的距离，需要模拟手动，所以想收集几组手动的轨迹作为比对。
然后网上搜了很多办法，几乎没有找到相关的代码，找到的要么是直接拖拽，不显示信息的；要么是直接记录轨迹，而不能够以鼠标按下和鼠标抬起之间的滑动距离作为依据的，所以融合了好几篇教程，修改了一下代码，基本上完成了需求。
遇到的问题
-
removeEventListener失效
在改代码途中还遇到了一个问题：.removeEventListener("mousemove", function(){console.log(...)});这个removeEventListener不起作用，根本不会运行。百度了很多知识发现是后面的function的问题。
网上搜索之后了解到，不起作用的原因是removeEventListener后面的function和addEventListener里面的function不一样，所以导致不能起作用。最后把addEventListener的function封装成了一个函数(myfunction)，然后直接使用函数名就可以了:
.removeEventListener("mousemove", myfunction);
.addEventListener('mousemove', myfunction);
- canvas连续画线不能断开两次画线
查过了资料，发现判断一下两次画线中间的情况，在第二次画线的开头，应该使用context.moveTo(e.x,e.y);而不是context.lineTo(e.x,e.y);
记录鼠标轨迹代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>log_tracks</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
border:0;
}
.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 context = monitor.getContext('2d');
var cset = [];
var startx = 0, starty = 0;
$('div').mousedown(mouseState).mouseup(mouseState);
function fixSize(){monitor.width = window.innerWidth;};
function log(e){
if(cset.length == 0){
context.moveTo(e.x,e.y);
}else{
context.strokeStyle = 'white';
context.lineTo(e.x,e.y);
context.stroke();
}
if(e.x-startx == e.x && e.y-starty == e.y){
startx = e.x;
starty = e.y;
}
coordinate.innerHTML = '(' + (e.x-startx)+', '+(e.y-starty) + ')';
cset.push(coordinate.innerHTML);
clist.innerHTML = cset.join(', ');
}
function mouseState(e) {
if (e.type == "mouseup") {
$('#logs').append('<br/>'+cset.join(', '));
clist.innerHTML = cset.join('');
cset = [];
pad.removeEventListener("mousemove", log);
}
if (e.type == "mousedown") {
startx = 0; starty = 0;
pad.addEventListener('mousemove',log);
}
}
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>
<div id="logs"></div>
<div class="track-coordinate-list"></div>
</div>
</div>
</body>
</html>
- 每次点击都会以第一个点作为 0,0 点开始计算后面的距离
运行效果图：
运行效果图
网友评论