围绕一个圆圈的 Javascript 线答案

【问题标题】：Javascript line around a circle围绕一个圆圈的 Javascript 线
【发布时间】：2014-01-05 19:08:32
【问题描述】：

我想用 javascrip 编写这个很酷的可视化：

我有这个：http://test.wikunia.de/pi/ 但不幸的是，我不知道如何画出中间有一个黑色圆圈的线条。任何的想法？我现在使用 quadraticCurveTo，但也许贝塞尔曲线是更好的选择...

我的完整代码：

var canvas = document.getElementById('myCanvas');
var color_arr = new Array("yellow","orange","OrangeRed","red","violetred","MediumSlateBlue","blue","aquamarine","green","greenyellow");
var sA = (Math.PI / 180) * 270;
var pA = (Math.PI / 180) * 36;
if (canvas && canvas.getContext) {
  var ctx = canvas.getContext("2d");
  if (ctx) {
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);



  for (var i=0; i <= 9; i++) {
      ctx.strokeStyle = color_arr[i];
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.arc (350,  350,  250,  sA+(i)*pA,  sA+(i+1)*pA,  false);
      ctx.stroke();
      ctx.closePath();
      ctx.fillStyle = "white";
      ctx.strokeStyle = "white";
      ctx.font = "italic 30pt Arial";
      if (i > 4 && i < 8) {
        ctx.fillText(i.toString(), 350+290*Math.cos(sA+(i+0.5)*pA),350+290*Math.sin(sA+(i+0.5)*pA));
      } else {
        if (i == 3 || i == 4 || i == 8) {
            ctx.fillText(i.toString(), 350+275*Math.cos(sA+(i+0.5)*pA),350+275*Math.sin(sA+(i+0.5)*pA));
        } else {
            ctx.fillText(i.toString(), 350+260*Math.cos(sA+(i+0.5)*pA),350+260*Math.sin(sA+(i+0.5)*pA));
        }
      }
  }




  var pi = '31415...';
  for (i = 0; i <= 250; i++) {
      line(parseInt(pi.substr(i,1)),parseInt(pi.substr(i+1,1)));
  }
}
}

function line(no_1,no_2) {
  var rand_1 = Math.random();
  var rand_2 = Math.random();
  var grad= ctx.createLinearGradient(350+250*Math.cos(sA+(no_1+rand_1)*pA), 350+250*Math.sin(sA+(no_1+rand_1)*pA), 350+250*Math.cos(sA+(no_2+rand_2)*pA), 350+250*Math.sin(sA+(no_2+rand_2)*pA));
  grad.addColorStop(0, color_arr[no_1]);
  grad.addColorStop(1, color_arr[no_2]);
  ctx.lineWidth = 1;
  ctx.strokeStyle = grad;
  ctx.beginPath();

  ctx.moveTo(350+250*Math.cos(sA+(no_1+rand_1)*pA), 350+250*Math.sin(sA+(no_1+rand_1)*pA));
  ctx.quadraticCurveTo(350,350,350+250*Math.cos(sA+(no_2+rand_2)*pA),350+250*Math.sin(sA+(no_2+rand_2)*pA));
  ctx.stroke();
  }

【问题讨论】：

那么，代码在哪里？你试过什么？您尝试的方法有什么问题，预期的结果是什么？
预期结果是imgur.com/ZCUW7js如果尝试是test.wikunia.de/pi
你只是（与线条分开）在中心画一个黑色圆圈怎么样？是的，你已经拥有了什么，为什么它不起作用？向我们展示代码。
然后把代码贴在这里，这样问题对以后的访问者来说不是没用的。
我想例如从 5 到 0 的线有点弯曲，而不是直接穿过中间

标签： javascript canvas line bezier pi

【解决方案1】：

有趣！

中间的黑色圆圈只是没有曲线。

“线”是三次贝塞尔曲线。

贝塞尔曲线的两端似乎以一定间隔固定在圆周上。

这是我对该 PI 的简化版本的尝试：http://jsfiddle.net/m1erickson/Ju6E8/

这可能会上瘾，所以我的尝试很简单！

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:50px; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var r=100;

    ctx.arc(cx,cy,r,0,Math.PI*2);
    ctx.closePath();
    ctx.stroke();

    for(var a=0;a<PI2;a+=PI2/20){
        ctx.strokeStyle="blue";
        curve(a,PI2/2.5,25);
        ctx.strokeStyle="green";
        curve(a,PI2/5,50);
        ctx.strokeStyle="red";
        curve(a,PI2/10,75);
    }

    function curve(rotation,offset,innerRadius){
        var x1=cx+r*Math.cos(rotation);
        var y1=cy+r*Math.sin(rotation);
        var x2=cx+innerRadius*Math.cos(rotation+offset/3.5);
        var y2=cy+innerRadius*Math.sin(rotation+offset/3.5);
        var x3=cx+innerRadius*Math.cos(rotation+offset/1.5);
        var y3=cy+innerRadius*Math.sin(rotation+offset/1.5);
        var x4=cx+r*Math.cos(rotation+offset);
        var y4=cy+r*Math.sin(rotation+offset);
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.bezierCurveTo(x2,y2,x3,y3,x4,y4);
        ctx.stroke();
    }


    $("#stop").click(function(){});

}); // end $(function(){});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：