Как я могу вытянуть нарисованную линию точно до края квадрата? - PullRequest
Новая
       47

Как я могу вытянуть нарисованную линию точно до края квадрата?

0 голосов
/ 22 марта 2020

Я пытаюсь создать линии, которые простираются от угла квадрата до заданного угла. Это работает, однако оно не рисует линию к краю квадрата.

Я понимаю, что длина - это гипотенуза, но я не уверен, как извлечь это значение в данном конкретном случае.

Вот мой код: 

const angle = 32;   // Degree
const offset = 20; // Canvas Padding

let c = document.getElementById("cumulatedView");
let ctx = c.getContext("2d");

const x1 = 250 + offset;
const y1 = 250 + offset;
const length =  250;

ctx.beginPath();
ctx.rect(offset, offset, 250, 250);
ctx.stroke();

for ( let i = 0; i < 3; i++ ) {
  x2 = x1 - Math.cos(Math.PI * (angle * i) / 180) * length;
  y2 = y1 - Math.sin(Math.PI * (angle * i) / 180) * length;  

  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

Я создал JSFiddle, чтобы продемонстрировать, как он работает: https://jsfiddle.net/3ckyxoeg/1/

...