JavaScript圖形實例：圖形的平移和對稱變換

時間 2019-12-24

標籤 javascript 圖形實例平移對稱變換欄目 JavaScript 简体版

原文原文鏈接

1.1 六瓣花平移變換

平移變換是指圖形從一個位置到另外一個位置所做的直線移動。若是要把一個位於P（x,y）的點移到新位置P’(x’,y’)，如圖1，則只要在原座標上加上平移距離Tx和Ty便可。javascript

即 x’=x+Tx html

y’=y+Tyjava

圖1 點的平移canvas

生成一個六瓣花型圖案的基本數據，經過平移變換繪製8行8列共64個六瓣花型的圖案。數組

編寫以下的HTML代碼。瀏覽器

<!DOCTYPE html>3d

<head>rest

<title>六瓣花平移變換</title>orm

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,320,320);

context.strokeStyle="blue";

context.lineWidth=1;

var dig=Math.PI/64;

var x=new Array();

var y=new Array();

var r=40;

// 生成一個六瓣花型圖案的基本數據

for (var i=0;i<=128;i++)

{

d=r/2*(0.8+Math.sin(18*i*dig)/5)*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個六瓣花型的圖案

for (var row=1;row<=8;row++)

for (var col=1;col<=8;col++)

{

// 計算平移量px和py

px=(2*col-1)/2*r;

py=(2*row-1)/2*r;

for (i=0;i<=128;i++)

{

x1=x[i]+px;

y1=y[i]+py;

if (i==0)

{

context.moveTo(x1,y1);

bx=x1; by=y1;

}

else

context.lineTo(x1,y1);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="320" height="320">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出64個六瓣花型的圖案，如圖2所示。

圖2 64個六瓣花型的圖案

1.2 對稱變換

對稱變換的公式以下：

x’=ax+by

y’=cx+dy

當a,b,c,d 取不一樣值時，產生不一樣的對稱變換。

（1）當b=c=0,a=-1,d=1 時，產生相對於y 軸對稱的反射圖形。

（2）當b=c=0,a=1,d=-1 時，產生相對於x 軸對稱的反射圖形。

（3）當b=c=0,a=d=-1 時，產生相對於原點對稱的反射圖形。

（4）當b=c=1,a=d=0 時，產生相對於直線y=x 對稱的反射圖形。

（5）當b=c=-1,a=d=0 時，產生相對於直線y=-x 對稱的反射圖形。

各對稱變換如圖3所示。

圖3 對稱變換

在半徑爲60的圓周上取5個等分點，用這5個點依次首尾鏈接畫5條線，能夠繪製出一個正多邊形。用這個正多邊形爲原圖，根據選擇的方式，進行對稱變換。

編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

// 定義保存基本圖案數據的數組

var x=new Array(10);

var y=new Array(10);

var dig=2*Math.PI/5;

for (var i=0;i<=5;i++)

{

x[i]=-75+60*Math.sin(i*dig);

y[i]=-75+60*Math.cos(i*dig);

}

function 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>

</form>

<br/>

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中，出現「對稱方式選擇：」下拉列表框，提供5種對稱方式的選擇，改變選定的對稱方式後，能夠繪製出基本圖案的相應對稱變換圖案。整個演示過程錄屏後展現如圖8所示。

圖4 圖形的對稱變換

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。