javascript - 如何在圆的两点之间画一条线

Question

我和我的小组（学校项目）正在尝试在一个圆圈中创建一个模乘，我们在圆圈内的线条方面取得了一些成功，但在绘制点之间的线条时我无法弄清楚我错过了什么组成圆圈。

我如何尝试画圆：

function drawCircle() {
            points = [];
            ctx.clearRect(0, 0, canvas.width, canvas.height);


            ctx.beginPath();

            var step = 2 * Math.PI/points;

            ctx.beginPath();

            for(var theta=0;  theta < 2*Math.PI;  theta+=step)
            { var test1 = x + radius*Math.cos(theta);
                var test2 = y - radius*Math.sin(theta);
                ctx.lineTo(test1,test2);
            }

            ctx.closePath();
            ctx.stroke();

整个js代码：

function draw() {

        var canvas = document.getElementById('multiplier');
        var ctx = canvas.getContext('2d');
        var x = 300; // x coordinate
        var y = 300; // y coordinate
        var radius = 295; // Arc radius
        var point_size = 2;
        var number_of_points = 10;
        var multiplier = 2;
        var points = [];

        function drawCircle() {
            points = [];
            ctx.clearRect(0, 0, canvas.width, canvas.height);


            ctx.beginPath();

            var step = 2 * Math.PI/points;

            ctx.beginPath();

            for(var theta=0;  theta < 2*Math.PI;  theta+=step)
            { var test1 = x + radius*Math.cos(theta);
                var test2 = y - radius*Math.sin(theta);
                ctx.lineTo(test1,test2);
            }

            ctx.closePath();
            ctx.stroke();


            var i;
            var angleBetweenPoints = 360 / number_of_points;
            for (i = 0; i < number_of_points ; i++) {
                drawPoint(i * angleBetweenPoints, 1)
            }

            for (i = 1; i < points.length; i++ ) {
                ctx.beginPath();
                ctx.moveTo(points[i].x, points[i].y);

                if (i < points.length / multiplier ) {
                    ctx.lineTo(points[i*multiplier].x, points[i*multiplier].y);

                } else {
                    ctx.lineTo(points[i*multiplier % points.length].x, points[i*multiplier % points.length].y);

                }
                ctx.stroke();
            }
        }

        function drawPoint(angle,distance){
            var pointx = x + radius * Math.cos(-angle*Math.PI/180) * distance;
            var pointy = y + radius * Math.sin(-angle*Math.PI/180) * distance;

            ctx.beginPath();
            ctx.arc(pointx, pointy, point_size, 0, 2 * Math.PI);
            ctx.fill();

            points.push({x: pointx, y: pointy});
        }

        if (canvas.getContext) {
            drawCircle();
        }

        // add event listener to point number selection
        var pointNumElement = document.getElementById("pointNumber");
        pointNumElement.addEventListener('input', function(e){
            number_of_points = this.value;
            drawCircle();
        });

        // add event listener to multiplier number selection
        var pointNumElement = document.getElementById("multiplierInput");
        pointNumElement.addEventListener('input', function(e){
            multiplier = this.value;
            drawCircle();
        });
    }

标签： javascriptline