• Как отрисовывать линию в сторону курсора всегда фиксированной длинны?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    можно через Math.atan2() посчитать угол из центра на мышку.
    Зная угол — найти конец линии фиксированной длины length под этим углом:
    const { documentElement: el } = document;
    const [cx, cy] = [el.clientWidth / 2, el.clientHeight / 2];
    const angle = Math.atan2(y - cy, x - cx);
    const length = 50;
    const [bx, by] = [cx + length * Math.cos(angle), cy + length * Math.sin(angle)];
    // рисуем линию из (cx, cy) в (bx, by)


    P.S. Раз у вас логика от центра канвы, может быть удобнее однажды сделать ctx.translate(width/2, height/2) — и центр (0, 0) теперь будет в центре холста.
    Ответ написан
    3 комментария
  • Как отрисовывать линию в сторону курсора всегда фиксированной длинны?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    ctx = canvas.getContext('2d');
    setInterval(function draw_line() {
        // дано:
        // x, y - координаты курсора мышки
        // size - длина линии в пикселях
    
        // координаты начала линии
        const cx = document.documentElement.clientWidth / 2;
        const cy = document.documentElement.clientHeight / 2;
    
        // дельта X и Y (разница между коордами мышки и центром
        const dx = x-cx;
        const dy = y-cy;
        
        // расстояние от начала линии до мышки
        const dist = Math.hypot(dx, dy);
    
        // на сколько надо умножить Дельты, чтобы получить линию заданной длины
        const multiplier = size/dist;
    
        // высчитываем координаты конца линии
        const nx = cx + dx * multiplier;
        const ny = cy + dy * multiplier;
    
        // рисуем линию
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.moveTo(cx, cy);
        ctx.lineTo(nx, ny);
        ctx.lineWidth = "2";
        ctx.stroke();
    }, 1);
    Ответ написан
    Комментировать