使用JavaScript在画布上歪曲一条线

Question

我在画布上画线。用户可以选择特定的行并能够倾斜该行。通过倾斜，我的意思是他们可以将线的一个端点拖动到同一x轴上的所需点。如何使用JavaScript和HTML5 canvas进行此操作？

Answer 1

绘制线条的一般方法是：

ctx.moveTo(line.startX, line.startY);
ctx.lineTo(line.endX, line.endY);
ctx.stroke();

然后你可以添加EventListeners并检查鼠标是否在线附近......

window.addEventListener("mousemove", function(e)
{
    mouse.x = e.layerX || e.offsetX;
    mouse.y = e.layerY || e.offsetY;
    // check to see if the mouse is near the line(s) here...
    // you can change to x/y and start/end
    // example:
    if (mouse.x <= line.startX + 5 || mouse.x >= line.startX - 5)
    {
        // mouse is within 5px of first x
    }
});