らせんではなく、特殊なカテゴリである、豊かな詩、の様々な数学的曲線。らせん用語はギリシャ語から来て、それが「回旋」または意味「傷を。」例えば、平面スパイラルは、外方バイターン巻線が形成される曲線上の点に固定されています。
アルキメデススパイラルヘリックスおよび金は、典型的なスパイラルです。内側の円のスパイラル：ここでは、典型的ならせんを探ります。
1。スパイラル内の円形の方法を形成します
内側螺旋円である小さな円を転動する過程において小さな円で固定大円、点Pが形成されたトラック内の動きを切ります。ポイントとしてPは、二つの異なる半径比となり、異なる軌道があります。図に示すように、例えば、小円の半径は、大円トラックの1/4に等しいときには、星型のラインが形成されています。Baiduの百科事典の用語「スパイラル内側の円」（https://baike.so.com/doc/388206-411038.html）を参照してください。
図1螺旋形成される円の概略図。
円形螺旋式内のデカルト座標です。
X =cosθと+ [COS（Nθ）] / N
Y =sinθ-[SIN（Nθ）] / N（0≤θ≤2π、N大円半径比の半径を有する小円です）
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
円形の螺旋内の<title>（）</タイトル>
ます。<script type = "text / javascriptの">
関数draw（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,300,300）。
context.strokeStyle =「赤」。
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、RR、0、にMath.PI * 2、TRUE）;
context.closePath（）;
context.stroke（）;
context.beginPath（）;
用（シータ= 0;シータ<2 *にMath.PI;シータ+ =にMath.PI / 100）
{
N = R / R。
VAR X = R *（Math.cos（シータ）+ Math.cos（シータ* N）/ N）。
VaRのY = R *（Math.sin（シータ）-Math.sin（N *シータ）/ N）。
（シータ== 0）の場合
context.moveTo（X、Y）
そうしないと
context.lineTo（X、Y）
}
context.closePath（）;
context.stroke（）;
context.restore（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスID = "myCanvas" 幅= "300" 高さ= "300"> </キャンバス>
</ BODY>
</ HTML>
図に示すように、HTML形式のテキストファイルにHTMLコードを保存した後、ブラウザでHTMLファイルを備え、このHTMLコードを開くには、キャンバスのスパイラルパターンで描かれた円の中に見ることができます。
円形スパイラルパターン1内の図2（R = 5R）
大円の比と小円の半径9は半径に変更され、すなわち、ステートメントを修正し、「VARのR = 20;」螺旋パターンキャンバス、図2に示すように、「VARのR = 10」には、内側の円が描かれています。
円内の3スパイラルパターン2（R = 9R）
2。ベルトは、スパイラル内側の円をループ
私たちは、接合リング接合部に表示される円のスパイラル、スパイラル内パラメトリック方程式を変更します。方程式のパラメータを変更します：
N =（R + R）/ R。
X =（R + R）* COS（I）+（R + O）* COS（N * H）
Y =（R + R）* SIN（θ） - （R + O）* SIN（N *θ）（0≤θ≤2π）
次のようにHTML文書に書かれたことは読み込みます。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>円形スパイラル内（ⅱ）</ TITLE>
ます。<script type = "text / javascriptの">
関数draw（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,300,300）。
context.strokeStyle =「赤」。
context.lineWidth = 2。
context.save（）;
context.translate（150,150）。
VaRのR = 60; // R + Rは、大円の半径であります
VaRのR = 15; //小さい円の半径
そこ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、Roを、0、にMath.PI * 2、TRUE）;
context.closePath（）;
context.stroke（）;
context.beginPath（）;
用（シータ= 0;シータ<2 *にMath.PI;シータ+ =にMath.PI / 100）
{
N =（R + R）/ R。
VAR X =（R + R）* Math.cos（シータ）+（R + O）Math.cos *（N *シータ）。
VaRのY =（R + R）* Math.sin（シータ） - （R + O）* Math.sin（N *シータ）。
（シータ== 0）の場合
context.moveTo（X、Y）
そうしないと
context.lineTo（X、Y）
}
context.stroke（）;
context.restore（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスID = "myCanvas" 幅= "300" 高さ= "300"> </キャンバス>
</ BODY>
</ HTML>
HTML形式のテキストファイルにHTMLコードを保存し、このHTMLファイルを開くには、ブラウザでHTMLコードが含まれている、あなたはキャンバスリング接合部のスパイラルパターンで描かれた円の中に見ることができ、4 。
ループ螺旋パターンを有する円内の図4
「VaRのR = 15;」を「VARのR = 24;」は、例えば、我々はステートメントを変更、図4に完成されていないコードの描画の上に、他のステートメントは変更されないまま、キャンバス上に描画されたパターンは、図5に示すように。このパターンは明らかに完全なパターンを描画していなかった、ある閉曲線、ではありません。θの範囲は[0,3π]、キャンバスは、図6に示すパターンに引き出され、この曲線が閉じられないように、ループ制御文を修正する、修飾ループ制御文、その結果θ範囲[0,4π]図に示すように、閉曲線模様を描いた。7枚のキャンバス。
図に描かれた50≤θ≤2πパターン。
図60≤θ≤3πパターンが描かれました
図70≤θ≤4πパターンが描かれました
どのようにパターンがθの所定の範囲ずに、描かれていることを、曲線が閉じているときに、自動的に描画を終了、プログラムを修正するには？
所与のパラメータ方程式を順次座標（x、y）と（X0、Y0）で算出された図面を、点座標が（x、y）を算出した後、出発点として、θ= 0の座標（X0、Y0）を取りますとき偶然、グラフィックスレンダリングの終わり。
<！DOCTYPE HTML>
<ヘッド>
円形のスパイラル（III）中の<title> </タイトル>
ます。<script type = "text / javascriptの">
関数draw（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 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>
3．另类圆内螺线
修改参数方程为：
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所示。
图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所示的图案。
图9 R=160，r=-96，o=40时的螺旋线
图10 R=160，r=-56，o=40时的螺旋线
图11 R=66，r=18，o=15时的螺旋线