个人中心
gpt4 book ai didi

javascript - Canvas :如何围绕指定的紫色点绘制从指定的橙色点到指定的绿色点的螺旋线

转载 作者：行者123 更新时间：2023-11-29 10:56:57 25 4
gpt4 key购买 nike

我正在尝试从“开始”点到“结束点”绘制螺旋线。螺旋线也有一个给定的中心点，因此它可以围绕该中心点绘制螺旋线。我不能让它工作，不知何故数学是完全错误的。关于如何解决这个问题有什么建议吗？

The jsfiddle of the code I tried is here. 

<!DOCTYPE HTML>
<html>
<body>
  <canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;"></canvas>

  <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");

    //center of the spiral coords:
    var centerX = 400;
    var centerY = 300;

    //draw the center of spiral point:
    drawCirc(centerX, centerY, 10, '#6f0c4f');

    var gap = 8;
    var STEPS_PER_ROTATION = 50;
    var rotations = 4;
    var increment = rotations * Math.PI / STEPS_PER_ROTATION;
    var theta = increment;

    //start point:
    var startX = 500;
    var startY = 380;

    //end point:
    var endX = 600
    var endY = 300;

    //draw the start and end points as small circles:
    drawCirc(startX, startY, 6, '#FF0000');
    drawCirc(endX, endY, 6, '#00FF00');

    //trying to calculate theta start position:
    theta = Math.abs(((centerX - startX) / Math.cos(theta)) / gap);

    var ind = 0;
    while (theta < rotations * Math.PI * 2) {
      var newX = centerX + theta * Math.cos(theta) * gap;
      var newY = centerY + theta * Math.sin(theta) * gap;
      var ukwObj = { x: newX, y: newY };
      if (ind == 0) {
        //draw start point with differnt color to differentiate
        drawCirc(newX, newY, 2, 'orange');
      } else {
        drawCirc(newX, newY);
      }
      ind++;
      theta = theta + increment;
    }

    function drawCirc(x, y, radius = 2, stroke = '#000000') {
      cxt.beginPath();
      cxt.arc(x, y, radius, 0, 2 * Math.PI);
      cxt.strokeStyle = stroke;
      cxt.stroke();
      cxt.fillStyle = stroke;
      cxt.fill();
    }

    cxt.stroke(); // draw the spiral
  </script>
</body>
</html>

最佳答案

画圆的原理是:
给定圆心 x,y 和半径 r，我们可以通过如下计算坐标来绘制属于圆的点:px = x + r * Math .cos(angle) 和 py = y + r * Math.sin(angle) 当 Angular 从 0 到 2* Math.PI 变化时。
如果 r 在 Angular 变化时增长，我们会得到一个向外的螺旋(从 Angular 0 到 Angular 2*PI，相当于 0)。

对于手头的问题，我们需要在极坐标(距离、 Angular )中计算螺旋的起点和终点位置。
所以我们需要计算开始 Angular 、开始距离、结束 Angular 和结束距离，并通过逐渐增加 Angular 和距离来绘制每个点。

最初的 theta 计算是错误的，我已经改变了。

然后我需要计算中心到起点的起始距离，以及中心到终点的结束距离。

在旋转过程中，您会从开始距离到结束距离渐进。

总 Angular 距离应该是totalTheta = numberOfRotation * 2 * Math.PI + (endAngle - startAngle)，我用rotations * Math.PI * 2替换了totalTheta)

只是为了好玩并证明它适用于任何初始条件，我稍微随机化了开始位置、结束位置和旋转次数。

我还减少了每次迭代的 Angular 增量，使每个点之间的距离看起来更均匀，但您可以评论以保持恒定的 Angular 速度。

下面的解会随机选择一个橙色圆点、一个绿色圆点、若干圈来完成螺旋，并围绕固定的紫色圆点绘制螺旋。

    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");

    //center of the spiral coords:
    var centerX = 200;
    var centerY = 150;

    //draw the center of spiral point:
    drawCirc(centerX, centerY, 10, '#6f0c4f');

    var gap = 8;
    var STEPS_PER_ROTATION = 50;
    var rotations = 1 + parseInt(Math.random() * 5, 10);
    var increment = rotations * Math.PI / STEPS_PER_ROTATION;
    var theta = increment;
    var dist = 0;

    //start point:
    var startX = centerX + (Math.random() * 150 - 75);
    var startY = centerY + (Math.random() * 150 - 75);
    var startAngleOffset = startX > centerX ? (startY > centerY ? 0 : 0) : (startY > centerY ? Math.PI : Math.PI);
    var startAngleSign = startX > centerX ? (startY > centerY ? 1 : -1) : (startY > centerY ? -1 : 1);

    //end point:
    var endX = centerX + (Math.random() * 150 - 75);
    var endY = centerY + (Math.random() * 150 - 75);
    var endAngleOffset = endX > centerX ? (endY > centerY ? 0 : 0) : (endY > centerY ? Math.PI : Math.PI);
    var endAngleSign = endX > centerX ? (endY > centerY ? 1 : -1) : (endY > centerY ? -1 : 1);

    //draw the start and end points as small circles:
    drawCirc(startX, startY, 6, '#FF0000');
    drawCirc(endX, endY, 6, '#00FF00');

    var startTheta = theta = startAngleOffset + startAngleSign * Math.atan(Math.abs(startY - centerY)/Math.abs(startX - centerX));

    var endTheta = endAngleOffset + endAngleSign * Math.atan(Math.abs(endY - centerY)/Math.abs(endX - centerX));

    var totalTheta = rotations * 2 * Math.PI + (endTheta - startTheta)
    dist = Math.sqrt(Math.pow(startY - centerY, 2) + Math.pow(startX - centerX, 2));

    finalDist = Math.sqrt(Math.pow(endY - centerY, 2) + Math.pow(endX - centerX, 2));
    var ind = 0;
    while (theta -startTheta < totalTheta) {
      var currentDist = (dist + ((finalDist - dist)* ((theta - startTheta) / (totalTheta))));
      var newX = centerX + currentDist * Math.cos(theta);
      var newY = centerY + currentDist * Math.sin(theta);
      var ukwObj = { x: newX, y: newY };
      if (ind == 0) {
        //draw start point with differnt color to differentiate
        drawCirc(newX, newY, 2, 'orange');
      } else {
        drawCirc(newX, newY);
      }
      ind++;
      theta = theta + increment;
      // decrement increment to make the space between points look more regular
      increment = Math.max(0.01, increment - 0.00096);
    }

    function drawCirc(x, y, radius = 2, stroke = '#000000') {
      cxt.beginPath();
      cxt.arc(x, y, radius, 0, 2 * Math.PI);
      cxt.strokeStyle = stroke;
      cxt.stroke();
      cxt.fillStyle = stroke;
      cxt.fill();
    }

    cxt.stroke(); // draw the spiral
<!DOCTYPE HTML>
<html>
<body>
  <canvas id="myCanvas" width="800" height="600" style="border:1px solid #c3c3c3;"></canvas>
</body>
</html>

关于javascript - Canvas :如何围绕指定的紫色点绘制从指定的橙色点到指定的绿色点的螺旋线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55218009/

25 4 0
文章推荐： javascript - 遍历 DOM 中的跟随轴
文章推荐： c# - 使用C#从Html页面中提取字符串
文章推荐： java - executeBatch 不返回多个 ResultSet 是否有原因
文章推荐： javascript - 克隆javascript对象省略一个属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com