显示鼠标滑动轨迹
程序员文章站
2022-03-06 09:57:26
``` Tracks 在第一排的方块中滑动鼠标 重置 ``` ......
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>tracks</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
.track-monitor {
background-color: chocolate;
}
.track-pad {
height: 200px;
background-color: dimgray;
}
.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>