使用JavaScript在画布上倾斜线

Question

I am drawing lines on a canvas. The user can select a particular line and be able to skew that line. By skew , I mean they can drag one end point of the line to a desired point on the same x-axis. How can I do this using JavaScript and HTML5 canvas?

Answer 1

The general way to draw a line is this:

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

and then you can add EventListeners and check to see if the mouse is near the line...

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
    }
});