javascript中的旋转向量

很抱歉，我知道这是以前提过的，但我正在努力让这个程序在画布上画一颗星星。向量不仅指向错误的方向，而且大小也会缩小

我意识到，对于向量（？）来说，数组可能比对象更快，但这是为了尽可能保持程序的可读性。IMHO vector.x比vector[0]更清晰。可能是品味的问题，但我正努力让代码尽可能清晰，以供学习者使用

提前谢谢

    <canvas id="canvas" height="600px" width="1000px">

    </canvas>

    <script>

        draw();

        function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');

                var currentPoint={x: 500, y: 300}; //start point
                var moveDist = 300;
                var turnAngle = 144;
                var repetitions = 5;
                var turnAngleRadians = turnAngle * (Math.PI/180)
                var moveVector = {x:moveDist, y:0}; //start facing right

                ctx.beginPath();
                ctx.moveTo(currentPoint.x, currentPoint.y);
                for(i=0;i<repetitions;i++){
                    moveVector = updateMV(moveVector, turnAngleRadians);
                    currentPoint.x = currentPoint.x + moveVector.x;
                    currentPoint.y = currentPoint.y + moveVector.y;
                    ctx.lineTo(currentPoint.x, currentPoint.y);
                }
                ctx.stroke();
            }

        function updateMV(moveVector, turnAngleRadians){
            var x2, y2
            x2 =    Math.cos(turnAngleRadians) * moveVector.x - Math.sin(turnAngleRadians) * moveVector.y;
            y2 =    Math.sin(turnAngleRadians) * moveVector.x - Math.cos(turnAngleRadians) * moveVector.y;
            moveVector.x = x2;
            moveVector.y = y2;
            return moveVector
        }

    </script>

draw（）；
函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var currentPoint={x:500，y:300}；//起点
var-moveDist=300；
var转角=144；
var重复次数=5次；
var转角弧度=转角*（数学PI/180）
var moveVector={x:moveDist，y:0}；//开始向右
ctx.beginPath（）；
ctx.moveTo（currentPoint.x，currentPoint.y）；
对于（i=0；i让我们把这个简单化

假设我们有一个星，我们命名五个点（一个星的点，不一定是10个几何点），从顶部顺时针的点a，B，C，D，E开始，我们想从直线BE开始

现在我们将制作一个简单的直立星，其中每行的长度为200。
它将是一个矢量，角度为72°，大小为200，从一个点（50500）开始

但首先我们必须学习画图向量。我们制作一个函数
drawVector
，然后制作每个角度为36°的星形，然后递归地应用它

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    vector = {x: 50, y: 500, deg: 0},
    length = 200;
function drawVector(degrees, magnitude) {
    var rad = degrees * (Math.PI / 180);
    var nextX = vector.x + Math.cos(rad) * magnitude;
    var nextY = vector.y - Math.sin(rad) * magnitude;
    currentAngle = degrees
    ctx.beginPath();
    ctx.moveTo(vector.x, vector.y);
    ctx.lineTo(nextX, nextY);
    ctx.stroke();
    vector.x = nextX;
    vector.y = nextY;
    vector.deg = degrees;
}
drawVector(72, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);

注意：
180+vector.deg
只是使下一个点的起点与第一个点的起点相同。您可以尝试删除每个
drawVector（180…
）来查看这一点。
您的y2公式是错误的，应该是错误的+

y2=Math.sin（转角弧度）*movevevector.x+Math.cos（转角弧度）*movevevector.y；


draw（）；
函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var currentPoint={x:500，y:300}；//起点
var-moveDist=300；
var转角=144；
var重复次数=5次；
var转角弧度=转角*（数学PI/180）
var moveVector={x:moveDist，y:0}；//开始向右
ctx.beginPath（）；
ctx.moveTo（currentPoint.x，currentPoint.y）；
对于（i=0；i这样一个愚蠢的小错误。谢谢你的帮助

通过将y2的变换计算更改为：

y2 =    Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;

你几乎可以把代码分解出来……我只是太懒了