Скопировать строку на холсте с помощью JavaScript

Question

Я рисую линии на холсте. Пользователь может выбрать конкретную линию и уметь перекосить эту строку. К skew, я имею в виду, что они могут перетащить одну конечную точку линии в нужную точку на той же оси х. Как я могу это сделать с помощью холста JavaScript и HTML5?

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