1.1部門変換
図1に示す上側パターンは、セクタ変換変換と呼ばれる下位セクタの矩形パターンに変換されます。
任意の点Pにおける矩形パターンを設けた。1（X- 1、Y 。1）ファンパターンP上の点に変換され、2（X- 2、Y 2）、長方形の長さX、セクタの中心座標（X- 0、Y 0）セクタ半径L、Bなどの扇形のX軸の最小角度、セクタCの円弧角に対応する、P点2を座標として計算されます。
X 2 =（L + Y 1）* COS（I）+ X 0
Y 2 = - （L + Y 1）* SIN（I）+ Y 0
ここで、θ= C *（XX 1）/ X- 1 + B
セクタ変換図1
基本的な6つの花のパターンデータを生成し、セクタの指定された数を変換するための基本的なパターン、の8つの矩形パターンの6。
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>部門の変革</ TITLE>
ます。<script type = "text / javascriptの">
関数drawBase（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,700,100）。
context.fillStyle =「黄色」。
context.strokeStyle =「赤」。
context.lineWidth = 2。
context.beginPath（）;
あなたがにMath.PI / 64 =でした。
VAR X =新しいArray（）;
VaRのY =新しいアレイ（）;
W = 80。
//データ6つの花のパターンを生成します
（; I <= 128; I ++ varがI = 0）するため
{
D = W / 2 *（0.8 + Math.sin * I * DIG（18）/ 10）* 1.2。
T = D *（0.5 + Math.sin（6 * I * DIG）/ 2）。
X [I] = T * Math.cos（I * DIG）。
Y [I] = T * Math.sin（I * DIG）。
}
//横一列に8つの6花模様を描きます
ため（N = 1、N <= 8; N ++）
{
PX =（2 * N-1）/ 2 * 30 + W。
ための式（I 0 =; I <= 128; I ++）
{
X1 = PX + X [i]は、
Y1 = / 2-Y W [i]は、
（私は== 0）の場合
{
context.moveTo（X1、Y1）;
BX = X1; よる= Y1;
}
そうしないと
context.lineTo（X1、Y1）;
}
}
context.lineTo（BX、によります）。
context.closePath（）;
context.stroke（）;
context.fill（）;
}
関数drawSector（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
（キャンバス== null）の場合
falseを返します。
VARコンテキスト= canvas.getContext（ '2D'）;
context.fillStyle = "＃1 EEEEFF"。
context.fillRect（0,0,700,500）。
context.fillStyle =「黄色」。
context.strokeStyle =「赤」。
context.lineWidth = 2。
context.beginPath（）;
あなたがにMath.PI / 64 =でした。
W = 80。
VAR X =新しいArray（）;
VaRのY =新しいアレイ（）;
//データ6つの花のパターンを生成します
（; I <= 128; I ++ varがI = 0）するため
{
D = W / 2 *（0.8 + Math.sin * I * DIG（18）/ 10）* 1.2。
T = D *（0.5 + Math.sin（6 * I * DIG）/ 2）。
X [I] = T * Math.cos（I * DIG）。
Y [I] = T * Math.sin（I * DIG）。
}
VaRのK =評価（document.myForm.levelNum.value）。
もし（K <1 || K> = 6）{
アラートが（「！ファンは、層数が1〜5のいずれかに設定する必要があります」）;
リターン;
}
//多重セクターの変革
L = 100。B =にMath.PI / 3。C =にMath.PI / 3。X0 = 350。Y0 = 500;
用（M = 1、M <= K; M ++）
ため（N = 1、N <= 8; N ++）
（; I <= 128; I ++ varがI = 0）するため
{
PX =（2 * N-1）/ 2 * W。
PY =（2 * M-1）/ 2 * W。
X1 = PX + X [i]は、
Y1 = PY-Y [i]は、
第= C *（W * 8-X1）/（8 * W）+ B。
X2 =（L + Y1）* Math.cos（TH）+ X0。
Y2 = - （L + Y1）* Math.sin（TH）+ Y0。
（私は== 0）の場合
{
context.moveTo（X2、Y2）;
BX = X2; よる= Y2。
}
そうしないと
context.lineTo（X2、Y2）;
}
context.lineTo（BX、によります）。
context.closePath（）;
context.stroke（）;
context.fill（）;
}
</ SCRIPT>
</ head>の
<本体のonload = "drawBase（ 'myCanvas1'）;">
基本的なパターン<BR/>
<キャンバスのid =「myCanvas1」幅=「700」高さ=「100」>お使いのブラウザはキャンバスをサポートしていません！</キャンバス>
<フォーム名= "あるmyForm">
セクタレベルの基本パターンの数の<input type =数名=「levelNum」値= 4サイズ= 3>
<input type =ボタン値= "确定" のonClick = "drawSector（ 'myCanvas2'）;">
</フォーム> <BR>
<キャンバスのid =「myCanvas2」幅=「700」高さ=「500」>お使いのブラウザはキャンバスをサポートしていません！</キャンバス>
</ BODY>
</ HTML>
HTML形式のテキストファイルにHTMLコードを格納し、その後、値ボックス「5」、「基本パターンレベルのセクタ番号の」入力で、ブラウザでHTMLファイルを備え、このHTMLコードを開くには、「OK」ボタンをクリックしてください図に示すように、あなたは、部門を変換し、ブラウザウィンドウ層5に基本的な6つの花模様を見ることができます。
セクタ変換図2
1.2変換環状
図3に示す上側変換変換と呼ばれる下部環状リング形状パターンの矩形ストライプパターンに変換されます。円ストリップチャートの互いに左右端部を置換し、したがって図リボンの上側部分が延伸されており、下部は圧縮されます。
任意の点Pに設けられたストライプパターン1（X- 1、Y 。1）、点Pに環状パターンに変換され、2（X- 2、Y 2）、短冊長さXは、周期的パターンは、中心座標（ありますPX、PY）は、Lは、内側環状半径（L値、変換後のパターンの大きな変形）であり、点P 2を座標として計算されます。
X 2 =（L + Y 1）* COS（θ）+ PX
Y 2 = - （L + Y 1）* SIN（θ）+ PY
ここで、θ= 2・π*（XX 1）/ X-
図3の環状変換します
図に示すように、実質的に環状のパターンを変換する方法によれば、4は環状の変換であろう。
図4は、リングのための基本的なパターン変換であります
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>環状変換</ TITLE>
ます。<script type = "text / javascriptの">
関数draw1（ID）
{
VARキャンバス=のdocument.getElementById（ID）。
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,800,500);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
var dig=Math.PI/64;
var x=new Array();
var y=new Array();
var w=100;
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;
t=d*(0.5+Math.sin(6*i*dig)/2);
x[i]=t*Math.cos(i*dig);
y[i]=t*Math.sin(i*dig);
}
// 在水平一行中绘制8个六瓣花型图案
for (n=1;n<=8;n++)
{
px=(2*n-1)/2*w;
for (i=0;i<=128;i++)
{
x1=px+x[i];
y1=w/2-y[i];
if (i==0)
{
context.moveTo(x1,y1);
bx=x1; by=y1;
}
else
context.lineTo(x1,y1);
}
}
context.lineTo(bx,by);
context.closePath();
context.stroke();
context.fill();
}
function draw2(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,800,500);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=2;
context.beginPath();
var dig=Math.PI/64;
var x=new Array();
var y=new Array();
var w=100;
var l=80;
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;
t=d*(0.5+Math.sin(6*i*dig)/2);
x[i]=t*Math.cos(i*dig);
y[i]=t*Math.sin(i*dig);
}
// 进行一重环形变换
for (n=1;n<=8;n++)
for (var i=0;i<=128;i++)
{
px=(2*n-1)/2*w;
x1=px+x[i];
y1=w/2+y[i];
th=2*Math.PI*(w*8-x1)/(w*8);
x2=(l+y1)*Math.cos(th)+400;
y2=(l+y1)*Math.sin(th)+250;
if (i==0)
{
context.moveTo(x2,y2);
bx=x2; by=y2;
}
else
context.lineTo(x2,y2);
}
context.lineTo(bx,by);
context.closePath();
context.stroke();
context.fill();
}
function draw3(id,k)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,800,500);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=2;
context.beginPath();
var dig=Math.PI/64;
w=200/k; l=0;
var x=new Array();
var y=new Array();
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;
t=d*(0.5+Math.sin(6*i*dig)/2);
x[i]=t*Math.cos(i*dig);
y[i]=t*Math.sin(i*dig);
}
// 进行多重环形变换
for (m=1;m<=k;m++)
for (n=1;n<=8;n++)
for (var i=0;i<=128;i++)
{
px=(2*n-1)/2*w;
py=(2*m-1)/2*w;
x1=px+x[i];
y1=py-y[i];
th=2*Math.PI*(w*8-x1)/(w*8);
x2=(l+y1)*Math.cos(th)+400;
y2=(l+y1)*Math.sin(th)+250;
if (i==0)
{
context.moveTo(x2,y2);
bx=x2; by=y2;
}
else
context.lineTo(x2,y2);
}
context.lineTo(bx,by);
context.closePath();
context.stroke();
context.fill();
}
</script>
</head>
<body>
<button onClick="draw1('myCanvas');">基本图案</button>
<button onClick="draw2('myCanvas');">环形变换</button>
<button onClick="draw3('myCanvas',2);">二重环形变换</button>
<button onClick="draw3('myCanvas',3);">三重环形变换</button>
<br/><br/>
<canvas id="myCanvas" width="800" height="500">您的浏览器不支持canvas！</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案”、“环形变换”、“二重环形变换”、“三重环形变换”这四个按钮，单击“基本图案”按钮，绘制出如图4所示的基本图案，单击“环形变换”，绘制出如图5所示的环形变换图案，单击“二重环形变换”，绘制出如图6所示的二重环形变换图案，单击“三重环形变换”，绘制出如图7所示的三重环形变换图案。
图5 环形变换图案
图6 二重环形变换图案
图7 三重环形变换图案
下面我们将上面的例子进行扩充，提供多种基本图案的选择，选择好基本图案后，进行环形变换。编写的HTML文件内容如下。
<!DOCTYPE html>
<head>
<title>可选择图案的环形变换</title>
<script type="text/javascript">
// 定义保存基本图案数据的二维数组
var x=new Array(10);
var y=new Array(10);
for (var i=0;i<10;i++)
{
x[i]=new Array(129);
y[i]=new Array(129);
}
var sele=0;
function initGraph()
{
var dig=Math.PI/64;
var w=100;
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=10*Math.sin(8*(i*dig+Math.PI/16));
x[0][i]=d*Math.cos(i*dig)+30*Math.cos(i*dig)*Math.cos(i*dig)*Math.cos(i*dig);
y[0][i]=d*Math.sin(i*dig)+30*Math.sin(i*dig)*Math.sin(i*dig)*Math.sin(i*dig);
}
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=w/2*(0.8+Math.sin(18*i*dig)/5)*1.2;
t=d*(0.5+Math.sin(6*i*dig)/2);
x[1][i]=t*Math.cos(i*dig);
y[1][i]=t*Math.sin(i*dig);
}
// 生成一个六瓣花型图案的数据
for (var i=0;i<=128;i++)
{
d=35*Math.sqrt(Math.abs(Math.cos(3*i*dig)));
t=d+10*Math.sqrt(Math.abs(Math.cos(9*i*dig)));
x[2][i]=t*Math.cos(i*dig)*1.2;
y[2][i]=t*Math.sin(i*dig);
}
}
initGraph();
function seleShape()
{
sele=document.frm.shape.selectedIndex-1;
drawBase('myCanvas');
}
function drawBase(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,800,500);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
var dig=Math.PI/64;
var w=100;
// 在水平一行中绘制8个基本花型图案
for (n=1;n<=8;n++)
{
px=(2*n-1)/2*w;
for (i=0;i<=128;i++)
{
x1=px+x[sele][i];
y1=w/2-y[sele][i];
if (i==0)
{
context.moveTo(x1,y1);
bx=x1; by=y1;
}
else
context.lineTo(x1,y1);
}
}
context.lineTo(bx,by);
context.closePath();
context.stroke();
context.fill();
}
function drawRound(id,k)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,800,500);
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=2;
context.beginPath();
var dig=Math.PI/64;
w=80; l=10;
// 进行多重环形变换
for (m=1;m<=k;m++)
for (n=1;n<=10;n++)
for (var i=0;i<=128;i++)
{
px=(2*n-1)/2*w;
py=(2*m-1)/2*w;
x1=px+x[sele][i];
y1=py-y[sele][i];
th=2*Math.PI*(w*10-x1)/(w*10);
x2=(l+y1)*Math.cos(th)+400;
y2=(l+y1)*Math.sin(th)+250;
if (i==0)
{
context.moveTo(x2,y2);
bx=x2; by=y2;
}
else
context.lineTo(x2,y2);
}
context.lineTo(bx,by);
context.closePath();
context.stroke();
context.fill();
}
</script>
</head>
<body>
<form name="frm">基本图案选择：
<select name="shape" onchange="seleShape();">
<option value="图案1">--请选择--</option>
<option value="图案1">图案1</option>
<option value="图案2">图案2</option>
<option value="图案3">图案3</option>
</select>
</form>
<button onClick="drawRound('myCanvas',1);">环形变换</button>
<button onClick="drawRound('myCanvas',2);">二重环形变换</button>
<button onClick="drawRound('myCanvas',3);">三重环形变换</button>
<br/><br/>
<canvas id="myCanvas" width="800" height="500">您的浏览器不支持canvas！</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案选择”下拉列表框，提供三种基本图案的选择，还有“环形变换”、“二重环形变换”、“三重环形变换”这三个命令按钮。选定“基本图案”后，单击某个按钮，绘制出基本图案的相应环形变换图案。整个演示过程录屏后展示如图8所示。
图8 可选择图案的环形变换