JavaScript线绕一圈

Question

I want to programm this cool visualization with javascrip: 我想用javascrip编程这个很酷的可视化：

http://imgur.com/ZCUW7js http://imgur.com/ZCUW7js

I have this: http://test.wikunia.de/pi/ but unfortunately I have no idea how to draw the lines that there is a black circle in the middle. 我有这个： http : //test.wikunia.de/pi/，但是不幸的是，我不知道如何画出中间有黑圈的线。 Any idea? 任何想法？ I am using quadraticCurveTo now, but maybe bezier curve is a better option... 我现在正在使用quadraticCurveTo，但也许贝塞尔曲线是更好的选择...

My full code: 我的完整代码：

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();
  }

Answer 1

Interesting! 有趣！

The black circle in the middle is just an absence of curves. 中间的黑色圆圈只是没有曲线。

The "lines" are cubic Bezier curves. “线”是三次贝塞尔曲线。

The beziers appear to be anchored on both ends to the circle circumference at intervals. 贝塞尔曲线看起来像是在两端间隔固定在圆周上。

Here's my try at a simplified version of that PI: http://jsfiddle.net/m1erickson/Ju6E8/ 这是我尝试使用的该PI的简化版本： http : //jsfiddle.net/m1erickson/Ju6E8/

This could be addictive so I'm leaving my attempt simple! 这可能会让人上瘾，所以我将尝试变得简单！

<!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>

JavaScript线绕一圈

问题描述

1 个解决方案

解决方案1
0 2014-01-05 21:12:10

JavaScript线绕一圈

问题描述

1 个解决方案

解决方案1 0 2014-01-05 21:12:10

解决方案1
0 2014-01-05 21:12:10