主页 / 问题 / 886794
Accepted
Kunoichi
Asked:2020-09-29 02:02:59 +0000 UTC2020-09-29 02:02:59 +0000 UTC

在画布上绘制等边多边形

  • 772

有一个画布（js），你需要在上面绘制一个具有随机数量顶点的等边多边形。如何确定点的坐标，知道起点的坐标以及从起点到点的距离？

工作代码：

function drawPoligon(x0, y0, n) {
    console.log('x0=' + x0 + ', y0=' + y0 + ', n=' + n + ', r=' + r);
    var coordArray = [[]];
    for (var i = 0; i < n; i++) {
        var xi = x0 + r * Math.cos(2*Math.PI*i/n);
        var yi = y0 + r * Math.sin(2*Math.PI*i/n);
        console.log('i=' + i + ', xi=' + xi + ', yi=' + yi);
        coordArray[i] = [xi, yi];
    }
    console.log(coordArray);
    return coordArray;
}

结果：

在此处输入图像描述

javascript

2 个回答

  1. Best Answer

    您需要其中一个点的另一个角。为简单起见，我们假设它为零。中心点的坐标 - x 0 , y 0，外接圆的半径 - R，边数 - N ... i从 0 变化到N -1。

    在此处输入图像描述

    在此处输入图像描述

    所以我们得到一个正多边形。没错，您有一个不同的词-等边...但是正方形和菱形都适合4个点？还是它仍然正确？

    • 1

  2. 点的坐标由上一个答案的公式确定，类似于具有半径R和中心的圆的参数方程center。这N是多边形的边数。

    执行：

    var ctx = document.getElementById("cnv").getContext('2d');
    var id = 0;
    var Point2d = function(x, y) {
      this.x = x || 0;
      this.y = y || 0;
    }

    Point2d.prototype.set = function(x, y) { 
      this.x = x;
      this.y = y;
    };

    Point2d.prototype.translate = function(p) { 
      this.x += p.x;
      this.y += p.y;
      return this;
    };

    function getRegularPolygonPoints(center, N, R) {
      var points = [];
      var alpha = 2*Math.PI / N;  
      for (var i = 0; i < N; i++) {
        points.push(new Point2d( 
          center.x + R*Math.cos(alpha*i),
          center.y + R*Math.sin(alpha*i))
        )
      }  
      return points;
    }


    function drawPolygon(points) {
      ctx.beginPath();
      ctx.moveTo(points[0].x, points[0].y); 
      for (var i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
      }
      ctx.lineTo(points[0].x, points[0].y);//  close the shape
      ctx.lineWidth = 1;
      ctx.fillStyle = "#899";
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
    }

    var center = new Point2d(250, 120);
    var regPolPoints = getRegularPolygonPoints(center, 4, 50);

    var render = function() {    
      drawPolygon(regPolPoints);
      id = requestAnimationFrame(render);
    }

    id = requestAnimationFrame(render);
        <canvas id="cnv" width="400" height="400"></canvas>

    会有问题问

    • 1

相关问题