Я попытался нарисовать линию с определенным углом на холсте html.К сожалению, линия не появляется под нужным углом.Может кто-нибудь сказать мне, что я делаю неправильно?
HTML-код:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Test html canvas</title>
</head>
<body>
<canvas id="cumulatedView" width="250" height="250"></canvas>
</body>
</html>
CSS-код:
canvas{
background-color: grey;
background-position: center;
background-size: 100% 100%;
}
Javascript код:
var angle = 90; // Degree
var c = document.getElementById("cumulatedView");
var ctx = c.getContext("2d");
x1 = 125;
y1 = 125;
length = 100;
x2 = x1 + Math.cos((Math.PI / 180.0) * angle - 90) * length
y2 = y1 + Math.sin((Math.PI / 180.0) * angle - 90) * length
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
Следующие две темы уже были очень полезны.Но я не хотел отвечать на них, потому что они немного старше.
JS Canvas - нарисуйте линию под заданным углом
Нарисуйте линию изx, y с заданным углом и длиной
Я загрузил пробную версию для тестирования на JSFiddle.Проблема там тоже.https://jsfiddle.net/zkurqp4x/
Я все еще начинающий с HTML и Javascript.Спасибо за вашу помощь.