在前端里如何让mouseMoves数组显现出来
时间: 2024-03-19 19:43:54 浏览: 26
要在前端中将 `mouseMoves` 数组显现出来,可以在Canvas上绘制出鼠标移动轨迹。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Demo</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
var mouseMoves = [];
canvas.addEventListener("mousedown", function(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop});
});
canvas.addEventListener("mousemove", function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop});
}
});
canvas.addEventListener("mouseup", function(e) {
isDrawing = false;
});
// 显示鼠标轨迹
function drawMouseMoves() {
ctx.beginPath();
ctx.moveTo(mouseMoves[0].x, mouseMoves[0].y);
for (var i = 1; i < mouseMoves.length; i++) {
ctx.lineTo(mouseMoves[i].x, mouseMoves[i].y);
}
ctx.stroke();
}
// 调用函数显示鼠标轨迹
drawMouseMoves();
</script>
</body>
</html>
```
在这个示例代码中,我们创建了一个Canvas元素,并绑定了鼠标事件。当用户按下鼠标左键时,我们开始绘制路径,并将路径的起点设置为鼠标当前位置,并将当前位置添加到 `mouseMoves` 数组中。当用户移动鼠标时,如果正在绘制路径,则将路径的终点设置为鼠标当前位置,并绘制出路径,同时将当前位置添加到 `mouseMoves` 数组中。当用户松开鼠标左键时,停止绘制路径。
为了显示鼠标移动轨迹,我们创建了一个名为 `drawMouseMoves` 的函数。该函数通过遍历 `mouseMoves` 数组,在Canvas上绘制出鼠标移动轨迹。最后,我们调用 `drawMouseMoves` 函数来显示鼠标移动轨迹。
你可以根据自己的需求修改这个示例代码,实现在Canvas上绘制出自己的名字并显示鼠标移动轨迹。需要注意的是,Canvas上的绘制会消耗一定的性能,如果要在Canvas上绘制复杂的图形,可能会影响用户体验。