Javascript context.moveTo（）x和y参数未使用requestAnimationFrame递减

我有两条90度角的直线，我想通过旋转垂直线使角度在90和0之间越来越小。我正在尝试将

moveTo

参数更改为可以增加值，但不能减少值。另外，您能否帮助我确保在动画期间移动的线与水平线的长度相同。现在它看起来越来越小，然后随着它的完成变得越来越大

window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
变量长度=50；
var x=50；
变量y=50；
var forward=真；
（函数animate（）{
如果（x可以使用变换而不是三角法来绘制垂直折叠线：

以下是注释代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var-nextTime=0；
无功延迟=100；
变量角度=-Math.PI/2；
var-cx=150；
var-cy=150；
var半径=50；
请求动画帧（动画）；
函数动画（时间）{
//等待所需的时间过去
如果（时间Sin和Cos

所有的图形程序员都应该完全了解这两个三角函数

MarkE给出了一个很好的答案，但我将指出一种简单的trig方法，您可以使用该方法找到一个具有所需距离和角度的点

假设你想要的线有一个长度

var length = 100;

开始于,

var posX = 200;
var posY = 200;

未知的结束位置将是

var endX;
var endY;

你想要的角度是

var angle = 0; // in radians 

弧度V度
在javascript中，所有需要角度的数学函数都使用角度作为弧度。
上述
角度
以弧度为单位，角度=0
在屏幕上从左到右指向，角度=Math.PI/2

（90度）在屏幕上从上到下，角度=Math.PI（180度）在屏幕上从右到左，角度=Math.PI*（3/2）（270度）在屏幕上从下到上

如果您喜欢以度为单位工作，则可以通过将度乘以

Math.PI/180来转换为弧度。

函数将度转换为弧度

function degree2Radians(deg){
    return deg * (Math.PI/180);
}

回到以一定角度获取直线。我们将使用trig函数

Math.cos

和

Math.sin

查看Wiki了解详细信息

因此，计算是分步骤进行的

var x,y; // temp working variables
x = Math.cos(angle);  // get the amount of x in the line for angle
y = Math.sin(angle);  // get the amount of y in the line for angle 
// cos and sin will return values -1 to 1 inclusive.

// now scale the values to the length of the line
x *= length;
y *= length;

// now you have the offset from the start of the line
// to get the end point add the start
endX = x + posX;
endY = y + posY;

现在你可以按你想要的角度画线了

ctx.beginPath();
ctx.moveTo(posX,posY);
ctx.lineTo(endX,endY);
ctx.stroke();

当然，这是一个漫长的过程。这一切都可以通过两个步骤完成

endX = Math.cos(angle) * length + posX;
endY = Math.sin(angle) * length + posY;

或者如果你喜欢以度为单位的函数

// add to the current path a line from 
// startX,startY of 
// length pixels long
// at the angle angleDeg in degrees. Negative anticlockwise positive clockwise
function lineAtAngle(ctx, startX, startY, angleDeg, length){
    var angle = angleDeg * (Math.PI / 180);
    ctx.moveTo(startX, startY);
    ctx.lineTo(
        Math.cos(angle) * length + startX,
        Math.sin(angle) * length + startY
    )
}

以及如何使用它

ctx.beginPath(); // begin the line
lineAtAngle(ctx,200,200,-45,100); // draw a line at -45deg 
                                  // (from bottom left to top right)
                                  // 100 pixels long.
ctx.stroke();  // draw the line  

---

这就是如何使用正弦和余弦以一定角度和长度画一条线。

谢谢你的回答。我很欣赏你的工作，但我真的想知道我做错了什么。我尝试通过更改moveTo（）的x和y参数来再次这样做我把它放在问题的编辑部分，我真的想知道为什么x没有减小，当x为200时，我怎样才能使它减小1，这样它就可以开始旋转。至于你的答案，我不确定setTransform（）是怎么做的在这里工作。我试着阅读Mozilla文档。@jackblank.Cool。我在我的答案中添加了说明如何修改代码以使用三角函数来计算

moveTo

坐标。：-）这是我想要的效果，我很快就会接受这个答案。我知道如何使用trig来获得moveTo（）部分穿过一个看不见的圆圈，使垂直线看起来与水平线大小相同。这很好。我只关心我的逻辑。我无法在代码中减少x和y值。现在我只是想知道我的逻辑是如何工作的。不是使用x值，而是如何在x为在200。我认为当计数器

I

达到150时，x会减小，这让我很不安。当线条达到水平时，你可以使

dlt

为负值，开始线条向垂直方向移动。当它达到垂直方向时，你可以再次使其为正值，使线条向水平方向移动。很好的解释。和贪婪…在绘图时，一点“三角形几何”（=三角）是非常有用的工具。：-）@Blindman67谢谢你的解释。我想确认一下。当你使用

x*=length；

length是单位圆的半径？而

length

是线的长度？在乘以

length

之前，

x

和

y

（从

x=cos（a） 

&

y=sin（a）

）表示单位圆的半径，当然是1。

x，y

可以说是指向

角度方向的单位向量（或归一化向量）

。乘以

长度

可以缩放单位向量（x，y）到所需长度。是的，它是终端侧。在画布上，终端侧开始指向右侧（@

angle=0

），并随着角度的增加顺时针旋转。