js跟随鼠标动态画直线

2024-12-19 05:07:08 JS 1910

实现在网页上使用JavaScript跟随鼠标动态画直线可以通过以下步骤完成。我们将使用HTML5的Canvas元素来绘制直线，并且通过JavaScript来捕获鼠标移动事件，从而动态更新直线的终点。

步骤：

1. 创建HTML结构

首先，创建一个HTML文件，并添加一个Canvas元素用于绘制直线。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Line Drawing</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 隐藏页面滚动条 */
        }
        canvas {
            display: block;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>

    <script>
        // JavaScript代码将在这里编写
    </script>
</body>
</html>

2. 编写JavaScript代码

在 <script> 标签内部，编写JavaScript代码来实现动态绘制直线的功能。

javascript
// 获取Canvas元素和其上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置Canvas的宽度和高度为窗口的大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 初始直线的起点
let startX = canvas.width / 2;
let startY = canvas.height / 2;

// 监听鼠标移动事件
canvas.addEventListener('mousemove', function(event) {
    // 清除之前的直线
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新直线的终点为鼠标当前位置
    let mouseX = event.clientX;
    let mouseY = event.clientY;

    // 绘制直线
    ctx.beginPath();
    ctx.moveTo(startX, startY); // 起点
    ctx.lineTo(mouseX, mouseY); // 终点
    ctx.stroke();

    // 更新起点为当前鼠标位置，以便下一次移动时直接连接上一次的终点
    startX = mouseX;
    startY = mouseY;
});

解释：

Canvas设置: 首先获取Canvas元素及其2D上下文 (getContext('2d'))，并设置Canvas的宽度和高度为窗口的宽度和高度，以充满整个视口。
鼠标移动事件: 使用 addEventListener 监听Canvas上的 mousemove 事件。每当鼠标移动时，清除之前的直线并根据鼠标的当前位置更新直线的终点。
绘制直线: 使用Canvas的绘图API，首先开始路径 (beginPath())，移动到起点 (moveTo())，然后画一条直线到鼠标当前位置 (lineTo())，最后用 stroke() 方法绘制出直线。
更新起点: 每次绘制完成后，将起点更新为当前鼠标位置，以便下一次移动时直接从上一次的终点开始绘制。

注意事项：

Canvas元素的大小需要适应于视口大小，确保Canvas充满整个页面。
使用 clearRect() 方法清除Canvas上的内容是为了每次移动时不留下之前的直线残留。

通过以上步骤，你就可以实现一个简单的在鼠标移动时动态画直线的效果。