「では：4つの花柄JavaScriptのグラフィックインスタンス」と「：JavaScriptのグラフィックインスタンスの弓パターン私たちのグラフィックス描画における」、主に使用される方法は、最初の二つの座標の与えられた曲線パラメータの式から計算した後、2ていますラインのドットを接続し、ラインは、グラフィックスの絶妙な作品のコレクションを構成するであろう。のは、誰もが楽しみにしてから学ぶことのために、グラフィックセグメント構造を使用してのいくつかの例を与えることを続けましょう。
1。モアレパターン
曲線は式を座標に設定されています。
B = R *（1+罪（2.5×θ）/ 2）。
X1 = B * COS（θ）;
X2 = B * COS（I + N / 4）？
Y1 = b *の罪（θ）;
Y2 = b *の罪（I + N / 4）？（0≤th≤4p）
開始から0〜4π間隔でθ= 0、すべてのπ/ 180は、曲線の方程式、決定に一緒に2つずつの点（X1、Y1）と（X2、Y2）の座標値を取得しますモアレパターンを描くことができるようにセグメント。
下の書き込み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,400,300）。
context.strokeStyle =「赤」。
context.lineWidth = 1。
context.beginPath（）;
ための式（I 0 =; I <= 720; I ++）
{
私はにMath.PI / 180 * =。
彼は100 * =（1 + Math.sin（2.5 *）/ 2）。
X1 = 200 + E *（）Math.cos。
X2 = 200 + E * Math.cos（+にMath.PI / 4）。
Y1 = 150 *（）Math.sin。
Y2 = 150 * Math.sin（+にMath.PI / 4）。
context.moveTo（X1、Y1）;
context.lineTo（X2、Y2）;
}
context.closePath（）;
context.stroke（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスID = "myCanvas" 幅= "400" 高さ= "300"> </キャンバス>
</ BODY>
</ HTML>
図に示すように、HTMLテキストファイルにHTMLコードを格納し、次にブラウザにHTMLファイルを含む、このHTMLコードを開くために、それは、キャンバス描かモアレパターンに見ることができます。
図1モアレパターン
2。リングプレートパターン
曲線は式を座標に設定されています。
D = 100
E = 50
M = D + D / 3 *（1つの+ COS（8 * I * DIG）/ 2）* COS（I * DIG）。
N = E + E / 2 *（1 +罪（I * 8 *あなた）/ 2）* COS（私はあなたを*）。
X1 = 5 * M * COS（I * DIG）/ 4。
X2 = 5 * N * COS（私はあなたを*）/ 4。
P = D + D / 3 *（1つの+ COS（もし* 10 *）/ 2）* SIN（私はあなたを*）。
Q = E + E / 2 *（1つの+ COS（*あなたの中に8 *）/ 2）*罪（私はあなたを*）。
Y 1 = P *罪（私はあなたを*）。
Y 2 = Q *罪（私はあなたを*）。（0≤θ≤2π）
開始から0〜2π間隔でθ= 0、すべてのπ/ 128は、曲線の方程式、決定に一緒に2つずつの点（X1、Y1）と（X2、Y2）の座標値を取得しますセグメント、パターンがシートリングを描くことができるようになります。
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>リングセグメントを形成するためのシート</タイトル>
ます。<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。
あなた=にMath.PI / 128でした。
context.beginPath（）;
D = 100があります。E = 50;
（; I <= 256; I ++ varは私= 0）について
{
M = D + D / 3 *（1 + Math.cos（8 *θ）/ 2）* Math.cos（θ）。
N = E + A / 2 *（1 + Math.sin（8 *θ）/ 2）* Math.cos（θ）。
X1 = 100 + 5 * M * Math.cos（θ）/ 4。
X2 = 100 + 5 * N * Math.cos（θ）/ 4。
P = D + D / 3 *（1 + Math.cos（10 *θ）/ 2）* Math.sin（θ）。
Q = A + A / 2 *（1 + Math.cos（8 *θ）/ 2）* Math.sin（θ）。
Y1 = 160-P * Math.sin（θ）。
Y2 = 160-Q * Math.sin（θ）。
context.moveTo（X1、Y1）;
context.lineTo（X2、Y2）;
}
context.closePath（）;
context.stroke（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスID = "myCanvas" 幅= "300" 高さ= "300"> </キャンバス>
</ BODY>
</ HTML>
図に示すように、HTMLテキストファイルにHTMLコードを格納し、次にブラウザにHTMLファイルを含む、このHTMLコードを開くために、それは、線分からなる描画キャンバスシートリングパターンに見ることができます。
図2環板パターン線分
3。三次元の縞模様
次の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,600,400）。
context.strokeStyle =「赤」。
context.lineWidth = 1。
context.save（）;
context.translate（300200）。
context.beginPath（）;
用（シータ= 0;シータ<= 2 *にMath.PI;シータ+ =にMath.PI / 160）
{
X1 = 30 * Math.cos（シータ）。
Y1 = 15 * Math.sin（シータ）。
= 60 *（1 + Math.sin（3×シータ）/ 6）。
B = 100 *（1 + Math.sin（4×シータ）/ 6）。
C = 140 *（1 + Math.sin（5×シータ）/ 6）。
D = 180 *（1 + Math.sin（6×シータ）/ 8）。
X2 = * Math.cos（シータ+にMath.PI / 20）。
Y2 = A * Math.sin（シータ+にMath.PI / 20）。
X3 = B * Math.cos（シータ）。
Y3 = B * Math.sin（シータ）。
X4 = C * Math.cos（シータ+にMath.PI / 20）。
Y4 = C * Math.sin（シータ+にMath.PI / 20）。
X5 = 1.5 * D * Math.cos（シータ）。
Y5 = D * Math.sin（シータ）。
context.moveTo（X1、Y1）;
context.lineTo（X2、Y2）;
context.lineTo（X3、Y3）。
context.lineTo（X4、Y4）。
context.lineTo（X5、Y5）。
}
context.stroke（）;
context.restore（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスID = "myCanvas" 幅= "600" 高さ= "400"> </キャンバス>
</ BODY>
</ HTML>
図に示すように、HTMLテキストファイルにHTMLコードを格納し、次にブラウザのHTMLファイルこのHTMLコードを開くために、キャンバスは、線分からなるストライプパターンを斜視図に見ることができます。
図3次元の干渉縞パターン