已知圆心，半径，角度，求圆上的点坐标

圆心坐标：(x0,y0)
半径：r
角度：a
则圆上任一点为：（x1,y1）
x1 = x0 + r cos( a )
y1 = y0 + r sin( a )

已知圆心，半径，角度，求圆上的点坐标 - 图1

作者：初同学
链接：https://www.jianshu.com/p/ba69d991f1af
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

image.png

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="220" height="21">
  6.     <line x1="10" y1="11" x2="190" y2="11" style="stroke:rgb(255,0,0);stroke-width:1" />
  7.       <line id="arrow" x1="10" y1="11" x2="190" y2="11" style="stroke:rgb(255,0,0);stroke-width:1" />
  8.     <line id="arrow1" x1="10" y1="11" x2="190" y2="11" style="stroke:rgb(255,0,0);stroke-width:1" />
  10.     <line id="arrow2" x1="10" y1="11" x2="190" y2="11" style="stroke:rgb(255,0,0);stroke-width:1" />
  11.     <line id="arrow3" x1="10" y1="11" x2="190" y2="11" style="stroke:rgb(255,0,0);stroke-width:1" />
  12. </svg>
  14.     <script>
  15.         function x(x1, r, angle) {
  16.             return x1 + r * Math.cos(angle * Math.PI / 180);
  17.         }
  18.         function y(y1, r, angle) {
  19.             return y1 + r * Math.sin(angle * Math.PI / 180);
  20.         }
  22.         var arrow = document.getElementById('arrow');
  23.         var arrow1 = document.getElementById('arrow1');
  24.         arrow.setAttribute('x2', x(10, 10, 45));
  25.         arrow.setAttribute('y2', y(11, 10, 45));
  26.         arrow1.setAttribute('x2', x(10, 10, 315));
  27.         arrow1.setAttribute('y2', y(11, 10, 315));
  30.         var arrow2 = document.getElementById('arrow2');
  31.         var arrow3 = document.getElementById('arrow3');
  32.         arrow2.setAttribute('x1', x(190, 10, 225));
  33.         arrow2.setAttribute('y1', y(11, 10, 225));
  34.         arrow3.setAttribute('x1', x(190, 10, 135));
  35.         arrow3.setAttribute('y1', y(11, 10, 135));
  38.     </script>    
  40. </body>
  41. </html>