在Canvas中，要实现鼠标选中的线条高亮，可以通过以下步骤： 1. 首先，你需要存储每条线段的起点、终点以及颜色等信息。 2. 在`mousemove`事件中，检查鼠标位置是否与线段相交。这通常需要自定义一个函数来判断，例如通过向量计算或直线方程。 3. 如果鼠标位于某一线段上，则改变该线段的颜色或者样式以实现高亮效果。你可以重新绘制这条线或者创建一个覆盖层（透明度稍低）并画出高亮的线。 下面是一个简单的示例代码： ```javascript // 假设你已经有一个lines数组，其中每个元素包含line的起点、终点和原始颜色 var lines = [ {start: {x: 0, y: 0}, end: {x: 100, y: 100}, color: 'black'}, // 更多线... ]; // 鼠标移动事件处理 canvas.addEventListener('mousemove', function(event) { var rect = canvas.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; // 检查鼠标是否在某一线段上 for (var i = 0; i < lines.length; i++) { var line = lines[i]; // 这里只是一个简单的示例，实际项目可能需要更复杂的线段/点相交检测算法 if (isPointOnLine(x, y, line.start, line.end)) { // 高亮当前线段 line.highlightColor = 'red'; // 或者其他的高亮颜色 redrawLine(line); break; } } }); function isPointOnLine(x, y, start, end) { // 实现你的线段/点相交检测逻辑 } function redrawLine(line) { context.beginPath(); context.moveTo(line.start.x, line.start.y); context.lineTo(line.end.x, line.end.y); context.strokeStyle = line.highlightColor || line.color; context.stroke(); } ``` 注意：以上代码仅为示例，并未包含完整的线段/点相交检测逻辑（isPointOnLine函数），实际使用时需要根据具体需求实现这个功能。