从给定角度和长度的x，y绘制一条直线 [英] Draw a line from x,y with a given angle and length

问题描述

在Javascript中我想从x / y绘制一条具有给定长度和角度的线。我不想从x1 / y1到x2 / y2画一条线。我有一个x / y原点，一个角度和一个长度。

In Javascript I want to draw a line from x/y with a given length and angle. I don't want to draw a line from x1/y1 to x2/y2. I have an x/y origin, an angle and a length.

该行需要位于特定位置的标准网页之上。

The line needs to sit on top of a standard web page at a specific position.

我该怎么做？

谢谢

推荐答案

moveTo（x，y）定义行的起点

lineTo（x ，y）定义该行的结束点

moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line

所以你想要这样的东西：

So you want something like this:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
x1 = 30;
y1 = 40;
r =  50;
theta = 0.5;
ctx.moveTo(x1, y1);
ctx.lineTo(x1 + r * Math.cos(theta), y1 + r * Math.sin(theta));
ctx.stroke();

您必须确保 theta 是以弧度为单位，并且 ctx 被定义为您想要的任何画布上下文（在上面的代码中，这意味着您需要类似

where you must make sure that theta is in radians and that ctx is defined to be whatever canvas context you want it to be (in the above code, this means you want something like

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

html中的

。

in your html).

如果 theta 以度为单位，则可以使用 Math.cos（Math.PI * theta / 180.0）和 Math.sin（Math.PI * theta / 180.0）而不是 Math.cos（theta）和 Math.sin（theta）完成工作......

If theta is in degrees, you can use Math.cos(Math.PI * theta / 180.0) and Math.sin(Math.PI * theta / 180.0) instead of Math.cos(theta) and Math.sin(theta) to get the job done...

这篇关于从给定角度和长度的x，y绘制一条直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！