Question

很抱歉，因为我知道这已经提到了，但我很难让这个程序在画布上画一个星星。矢量不仅指向错误的方向，而且尺寸也缩小。

我意识到数组可能比向量（？）的对象更快，但它是为了使程序尽可能可读。 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>

Answer 1

让我们这么简单。

假设我们有一颗恒星，我们将这五个点（一个恒星点，不一定是10个几何点）命名为从顶部开始顺时针方向点A，B，C，D，E。我们会喜欢在线开始

我们现在将制作一个简单的直立星，其中每条线的长度为200。它将是一个角度为72°和幅度为200的矢量，从一个点（50,500）开始。

但首先我们必须学习绘制矢量。我们创建一个函数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...以查看此内容。

Answer 2

您的y2公式错误，应该是+

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

＆＃13;

       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
        }

＆＃13;

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

＆＃13;

Answer 3

这种愚蠢的错误。谢谢你的帮助hmpphep。

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

来解决此问题

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

在javascript中旋转矢量

3 个答案: