使用JavaScript在画布上倾斜一条线

Skew a line on canvas using JavaScript

本文关键字：倾斜 一条 JavaScript 使用      更新时间：2023-09-26

我正在画布上画线。用户可以选择一条特定的线，并能够扭曲这条线。通过倾斜，我的意思是他们可以将线的一个端点拖动到同一x轴上的所需点。我如何使用JavaScript和HTML5画布做到这一点?

一般的划线方式是这样的:

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
    }
});
相关文章：