如何在 HTML5 中绘制跟随光标/手指的动态线

Question

我们正在创建教育 material 并且需要匹配的应用程序。屏幕一侧有 5 个英语单词，另一侧有 5 个西班牙语单词框。我们正在使用 HTML5 + CSS + javascript。学生将用光标或手指从左侧框画一条线到右侧的正确翻译框。即：简单的匹配应用程序。下面的代码绘制了一条特定的线，但我想创建一条跟随 cursor/finger 的动态线。我想我需要 js 来检测框是否匹配。预先感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Color Lines</title>
</head>
<body>
<canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>
var canvas = document.getElementById('DemoCanvas');
 if (canvas.getContext) 
  {
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100, 10);
    context.lineTo(100, 200);
    context.lineWidth = 5;
    // set line color
    context.strokeStyle = '#808000';
    context.stroke();
  }
    </script>  
    </body>
    </html>

Answer 1

使用 canvas 是画线的一种方法，但它可能会有点混乱，因为您必须在每次清除 canvas 后重新绘制整个路径。

如果 canvas 不是必需的，在两点之间画一条线的简单方法是有一个 div 元素，它从两个端点获取它的长度和旋转。你在 Javascript 中做一些数学运算，比如：

let line= document.querySelector('.line');
function drawLine(x1, y1, x2, y2) {
  var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  var angle  = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
  line.style.transform = 'rotate('+angle+'deg)';
  line.style.width = length;
  line.style.height = '2px';
  line.style.left = x1 + 'px';
  line.style.top = y1 + 'px';
  line.style.backgroundColor = 'red';
}

drawLine( 100, 100, 250, 250);

<div class="line"></div>

在你的情况下，你会希望每个英文单词的元素都有一个与其相关联的行元素（可能作为子元素 div - 但我不知道你的 HTML 的结构）以及当学生触摸或鼠标按下单词时要选择的当前行，记住 x1，y2 然后在鼠标移动时（在 window 上）如果当前有选定的单词，请读取手指或鼠标的位置并为当前选中的单词的行调用 drawLine。

您可以在西班牙语单词上设置 mouseout 或 touchend 事件以感知它们何时被选中。

如何在 HTML5 中绘制跟随光标/手指的动态线

How to draw a dynamic line following cursor/ finger in HTLM5

javascript

html5-canvas