logicaroma
2/19/2017 - 1:53 AM

JS Bin // source http://jsbin.com/merijex

JS Bin

// source http://jsbin.com/merijex

jsbin.merijex.js
content_copyfile_download
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
};
jsbin.merijex.css
content_copyfile_download
svg {
  height: 1000px;
  width: 1000px;
}
index.html
content_copyfile_download
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
svg {
  height: 1000px;
  width: 1000px;
}
</style>
</head>
<body>
  <svg>
<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
  </svg>
<script id="jsbin-javascript">
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
};
</script>


<script id="jsbin-source-css" type="text/css">svg {
  height: 1000px;
  width: 1000px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", describeArc(150, 150, 100, 0, 270));
};
</script></body>
</html>