1.1 6花の翻訳変換
別の場所から採取された直線運動パターンを変換する変換手段。限り、元の並進距離のTx及びTyに結合された座標として、図1に示すように、あなたは、点P「（X」、Y「）の新たな場所に位置P（x、y）をしたい場合。
即X '= X +送信
Y「= Y +あなた
図パン午前1時
8行および翻訳変換によりパターニング64 6花の8列の合計を描画する、基本的なデータ6花のパターンを生成します。
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
<タイトル> 6つの花の翻訳変換</ 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,320,320）。
context.strokeStyle =「青」。
context.lineWidth = 1。
あなたがにMath.PI / 64 =でした。
VAR X =新しいArray（）;
VaRのY =新しいアレイ（）;
= 40であり; R
//は花柄6つの基本データを生成し、
（; I <= 128; I ++ varがI = 0）するため
{
D = R / 2 *（0.8 + Math.sin（18 * I * DIG）/ 10）* 1.3。
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行8列64 6花柄の合計を描きます
（;行<= 8;行++ VAR行= 1）のために
（; COL <= 8; COL ++ VAR COL = 1）のために
{
//計算翻訳pxとpyの量
PX =（2 * COL-1）/ 2 * R。
PY =（2 *行-1）/ 2 * R。
ための式（I 0 =; I <= 128; I ++）
{
X 1 = X [I] + PX。
Y1 = Y [I] + PY。
（私は== 0）の場合
{
context.moveTo（X1、Y1）;
BX = X1; よる= Y1;
}
そうしないと
context.lineTo（X1、Y1）;
}
}
context.lineTo（BX、によります）。
context.closePath（）;
context.stroke（）;
}
</ SCRIPT>
</ head>の
<ボディのonload = "（ 'myCanvas'）を描きます;">
<キャンバスのid =「myCanvas」幅=「320」高さ=「320」>お使いのブラウザはキャンバスをサポートしていません！
</キャンバス>
</ BODY>
</ HTML>
図に示すように、このHTMLブラウザがHTMLテキストファイルにHTMLコードを格納し、その後、HTMLファイルを開くために、64は、ブラウザウィンドウの6つの花のパターンを描画さ見ることができる2ショー。
2 64 6花柄
1.2対称変換
次のように対称的な変換式は次のとおりです。
X '= AX +によって
Y '= CX + DY
異なる値についてとき、B、C、D、異なる対称変換を生成します。
（1）場合B = C = O、= -1、D = 1、y軸に対する反射パターン対称。
（2）B = C = 0、A = 1、D = -1、x軸に対して反射パターン対称場合。
（3）場合B = C = 0、A = D = -1、反射パターンに対して生成された対称の原点。
（4）に対して、B = C = 1、D = = 0、反射パターンY = X直線対称。
直線yに対して（5）B = C = -1、A = D = 0、= -x生成反射パターン対称。
図に示すように、各対称変換。
図3の対称変換
5を順次5線を描画端と端が接続されている5点と、円周60上の分割点の半径に取り込ま、正多角形を描画することができます。これは、選択されたモード、対称変換によれば、正多角形を有する画像です。
下の書き込みHTMLコード。
<！DOCTYPE HTML>
<ヘッド>
<タイトル>対称変換</ TITLE>
ます。<script type = "text / javascriptの">
//配列に格納された基本パターンデータの定義
VAR X =新しいアレイ（10）。
VAR yは新しいアレイ（10）=。
あなたは= 2 *にMath.PI / 5でした。
（; I <= 5; I ++ varがI = 0）するため
{
X [I] = - 75 + 60 * Math.sin（I * DIG）。
Y [I] = - 75 + 60 * Math.cos（I * DIG）。
}
関数draw（）
{
var sele=document.frm.shape.selectedIndex;
var canvas=document.getElementById("myCanvas");
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,300,300);
//绘制x轴、y轴（注意：我们不进行旋转，故y轴向下）
context.beginPath();
context.moveTo(0,150);
context.lineTo(285,150);
context.moveTo(150,0);
context.lineTo(150,285);
context.strokeStyle = "blue";
context.stroke();
context.fillStyle = "blue";
context.beginPath();
context.moveTo(285,145);
context.lineTo(295,150);
context.lineTo(285,155);
context.closePath();
context.fill();
context.beginPath();
context.moveTo(145,285);
context.lineTo(150,295);
context.lineTo(155,285);
context.closePath();
context.fill();
context.fillStyle="yellow";
context.strokeStyle="red";
context.lineWidth=1;
context.save();
context.translate(150,150);
context.beginPath();
context.moveTo(x[0],y[0]);
for (n=1;n<=5;n++)
{
context.lineTo(x[n],y[n]);
}
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.moveTo(x[0],y[0]);
context.lineTo(x[2],y[2]);
context.strokeStyle="black";
context.stroke();
context.fillStyle="red";
context.strokeStyle="yellow";
context.beginPath();
switch(sele)
{
case 1: b=c=0,a=1,d=-1; break;
case 2: b=c=0,a=-1,d=1; break;
case 3: b=c=0,a=d=-1; break;
case 4: b=c=1,a=d=0; break;
case 5: b=c=-1,a=d=0; break;
}
context.moveTo(a*x[0]+b*y[0],c*x[0]+d*y[0]);
for (n=1;n<=5;n++)
{
context.lineTo(a*x[n]+b*y[n],c*x[n]+d*y[n]);
}
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.moveTo(a*x[0]+b*y[0],c*x[0]+d*y[0]);
context.lineTo(a*x[2]+b*y[2],c*x[2]+d*y[2]);
context.strokeStyle="black";
context.stroke();
context.restore();
}
</script>
</head>
<body>
<form name="frm">对称方式选择：
<select name="shape" onchange="draw();">
<option>--请选择--</option>
<option>X轴对称</option>
<option>Y轴对称</option>
<option>原点对称</option>
<option>直线Y=X对称</option>
<option>直线Y=-X对称</option>
</select>
</form>
<br/>
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“对称方式选择：”下拉列表框，提供5种对称方式的选择，改变选定的对称方式后，可以绘制出基本图案的相应对称变换图案。整个演示过程录屏后展示如图8所示。
图4 图形的对称变换