JavaScript图形实例：圆内螺线

陆晔發表於 2019-12-31 12:06:00

数学中有各式各样富含诗意的曲线，螺旋线就是其中比较特别的一类。螺旋线这个名词来源于希腊文，它的原意是“旋卷”或“缠卷”。例如，平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线。
阿基米德螺线和黄金螺旋线就是典型的螺旋线。下面我们探讨一种典型的螺旋线：圆内螺线。
<h3>1．圆内螺线的形成方式</h3>
        在固定的大圆中内切一个运动的小圆，在小圆滚动的过程中，其上一个定点P所形成的轨迹，即为圆内螺线。点P会随着两圆半径比值的不同而出现不同轨迹。例如，当小圆半径等于大圆的四分之一时，形成的轨迹则是星形线，如图1所示。参见百度百科的词条“圆内螺线”（https://baike.so.com/doc/388206-411038.html）。
 <img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231115559692-1623009707.png">
图1  圆内螺线的形成示意图
圆内螺线的笛卡尔坐标参数方程为：
x=cosθ+/n
y=sinθ-/n      （0≤θ≤2π， n为大圆半径与小圆半径的比值）
编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>圆内螺线（一）</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,300,300);
     context.strokeStyle="red";
     context.lineWidth=2;
     context.save();
     context.translate(150,150);
     var  R=80;    //  R+r 为大圆半径
     var  r=20;    // 小圆半径
     context.beginPath();
     context.arc(0,0,R+r,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.beginPath();
     context.arc(0,0,R-r,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.beginPath();
     for (theta=0;theta<2*Math.PI;theta+=Math.PI/100)
     {
        n=R/r;
        var x = R*(Math.cos(theta)+Math.cos(n*theta)/n);
        var y = R*(Math.sin(theta)-Math.sin(n*theta)/n);
        if (theta==0)
           context.moveTo(x,y);
        else
           context.lineTo(x,y);
      }
      context.closePath();
     context.stroke();
     context.restore();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出圆内螺线图案1，如图2所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231115723138-282975287.png"> 
图2  圆内螺线图案1（R=5r）
        将大圆半径与小圆半径的比值修改为9，即修改语句“var r=20;”为“var r=10”，则在画布中绘制出如图3所示的圆内螺线图案2。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231115812777-1359679105.png">
图3    圆内螺线图案2（R=9r）
<h3>2．带结环的圆内螺线</h3>
        我们修改圆内螺线的参数方程，使得螺线在交接处出现结环。修改的参数方程为：
    n=(R+r)/r;
    x = (R+r)*cos(θ)+(r+o)*cos(n*θ)
    y = (R+r)*sin(θ)-(r+o)* sin (n*θ)      （0≤θ≤2π）
编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>圆内螺线（二）</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,300,300);
     context.strokeStyle="red";
     context.lineWidth=2;
     context.save();
     context.translate(150,150);
     var  R=60;    //  R+r 为大圆半径
     var  r=15;    // 小圆半径
     var  o=15;    
     context.beginPath();
     context.arc(0,0,R+2*r+o,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.beginPath();
     context.arc(0,0,R-o,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.beginPath();
     for (theta=0;theta<2*Math.PI;theta+=Math.PI/100)
     {
        n=(R+r)/r;
        var x = (R+r)*Math.cos(theta)+(r+o)*Math.cos(n*theta);
        var y = (R+r)*Math.sin(theta)-(r+o)*Math.sin(n*theta);
        if (theta==0)
           context.moveTo(x,y);
        else
           context.lineTo(x,y);
      }
     context.stroke();
     context.restore();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出带结环的圆内螺线图案，如图4所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120043155-686908747.png">
图4  带结环的圆内螺线图案
        上面绘制图4的代码不是很完善，例如，我们修改语句“var  r=15;”为“var  r=24;”，其他语句保持不变，则在画布中绘制出如图5所示图案。这个图案显然不是一条封闭曲线，也就是图案未绘制完整。修改循环控制语句，使得θ范围为，则在画布中绘制出如图6所示图案，这条曲线仍未封闭；当修改循环控制语句，使得θ范围为，才在画布中绘制出如图7所示的封闭曲线图案。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120116655-390268394.png">
图5  0≤θ≤2π绘制的图案           
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120130800-1842408467.png"> 
图6  0≤θ≤3π绘制的图案
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120142295-681745491.png">
图7   0≤θ≤4π绘制的图案
        如何修改程序，使得图案绘制时，无需事先确定θ的取值范围，当曲线闭合时，自动结束绘制呢？
         取θ=0时的坐标（x0,y0）为起始点，之后按给定的参数方程依次计算坐标（x,y）并绘图，当计算的坐标点（x,y）与（x0,y0）重合时，结束图形绘制。
<!DOCTYPE html>
<head>
<title>圆内螺线（三）</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,300,300);
     context.strokeStyle="red";
     context.lineWidth=2;
     context.save();
     context.translate(150,150);
     var  R=60;    //  R+r 为大圆半径
     var  r=24;    // 小圆半径
     var  o=15;    
     context.beginPath();
     context.arc(0,0,R+2*r+o,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     context.beginPath();
     context.arc(0,0,R-o,0,Math.PI*2,true);
     context.closePath();
     context.stroke();
     var x1 = R+2*r+o;        // theta=0 时的值
     var y1 = 0;
     var i  = 1;
     context.beginPath();
     context.moveTo(x1,y1);
     do {
        if (i>20000) break;   // θ最大可达200π
        theta=i*Math.PI/100;
        n=(R+r)/r;
        var x2 = (R+r)*Math.cos(theta)+(r+o)*Math.cos(n*theta);
        var y2 = (R+r)*Math.sin(theta)-(r+o)*Math.sin(n*theta);
        context.lineTo(x2,y2);
        i++;
     } while (x2 != x1 && y2 != y1);
     context.stroke();
     context.restore();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
<h3>3．另类圆内螺线</h3>
修改参数方程为：
    n=(R+r)/r;
    x = (R+r)*cos(θ)-(r+o)*cos(n*θ)
    y = (R+r)*sin(θ)-(r+o)* sin (n*θ)      （0≤θ≤kπ，R、r、o取适当值）
编写如下的HTML代码。
  <!DOCTYPE html>
<head>
<title>圆内螺线（四）</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,300,300);
     context.strokeStyle="red";
     context.lineWidth=2;
     context.save();
     context.translate(150,150);
     var  R=180;  
     var  r=-96;  
     var  o=60;    
     var x0 = R-o;    // theta=0 时的值
     var y0 = 0;
     var i  = 1;
     context.beginPath();
     context.moveTo(x0,y0);
     do {
        if (i>20000) break;   // θ最大可达200π
        theta=i*Math.PI/100;
        n=(R+r)/r;
        var x = (R+r)*Math.cos(theta)-(r+o)*Math.cos(n*theta);
        var y = (R+r)*Math.sin(theta)-(r+o)*Math.sin(n*theta);
        context.lineTo(x,y);
        i++;
     } while (x != x0 && y != y0);
     context.stroke();
     context.restore();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出另类螺旋线图案，如图8所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120415668-671827227.png">
图8  R=180，r=-96，o=60时的螺旋线
        修改绘制图8程序中的R、r、o初始值，可以绘制出不同的螺旋曲线。例如，若指定R=160，r=-96，o=40，则在画布中绘制出图9所示的图案；若指定R=160，r=-56，o=40，则在画布中绘制出图10所示的图案；若指定R=66，r=18，o=15，则在画布中绘制出图11所示的图案。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120444334-5762065.png"> 
图9  R=160，r=-96，o=40时的螺旋线
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120510022-77798352.png">
图10  R=160，r=-56，o=40时的螺旋线
 <img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191231120529192-292472532.png">
图11  R=66，r=18，o=15时的螺旋线  
来源：https://www.cnblogs.com/cs-whut/p/12123746.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript图形实例：圆内螺线