javascript - 使用javascript在1点上绘制自定义数量的直线

Question

我正在尝试使用 html5 和 canvas/KineticJS 开发一个小型应用程序。我想跟踪从 2d 点开始到无限的许多光线，只需设置自定义角度。例如，如果我设置 90°，应用程序应该渲染四条光线（两条直线，一条垂直和一条水平，在我的 2d 点中相遇）。如果我设置 60°，我应该看到 3 条直线，如星号 *

Answer 1

您必须绘制的最长线是画布对角线的大小：

var r = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2));

使用sin和cos计算该半径处的每个端点：

var theta = delta * Math.PI / 180.0;
var dx = r * Math.cos(n * theta);
var dy = r * Math.sin(n * theta);

然后，只需从 (x, y) 到 (x + dx, y + dy) 画线。简单的。