Question

我试图在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 - draw line at a specified angle

Draw a line from x,y with a given angle and length

我已经上传了一个要在JSFiddle上进行测试的试用版。问题也在那里。 https://jsfiddle.net/zkurqp4x/

我还是HTML和Javascript的初学者。谢谢您的帮助。

Answer 1

我假设您正在尝试绘制一条垂直线。

由于您的角度是度数。尝试使用此代码计算（x2，y2）。

x2 = x1 + Math.cos(Math.PI * angle / 180) * length;
y2 = y1 + Math.sin(Math.PI * angle / 180) * length;

https://jsfiddle.net/29s5gqu7/1/

在html画布中绘制具有特定角度的线

1 个答案: