JavaScript圖形執行個體：圖形放大鏡效果

1. 基本四瓣花型圖案

根據四瓣花卉線的參數方程：

t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);

x=t*cos(θ));

y=t*sin(θ));

編寫如下的HTML檔案。

<!DOCTYPE html>

<head>

<title>基本的四瓣花型圖案</title>

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;

context.beginPath();

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

{

d=120*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=(160+t*Math.cos(i*dig));

y=(160+t*Math.sin(i*dig));

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

在浏覽器中打開包含這段HTML代碼的html檔案，可以看到在畫布中繪制出如圖1所示的四瓣花卉線圖案。

圖1 四瓣花卉線圖案

2．平鋪的100朵四瓣花

用一個二重循環将圖1的四瓣花卉繪制10行10列共100朵。編寫的HTML檔案内容如下。

<!DOCTYPE html>

<head>

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;

context.beginPath();

for (px=20;px<320;px+=30)

for (py=20;py<320;py+=30)

{

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

{

d=20*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=px+t*Math.cos(i*dig);

y=py+t*Math.sin(i*dig);

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

在浏覽器中打開包含這段HTML代碼的html檔案，可以看到在畫布中繪制出如圖2所示的平鋪的100朵四瓣花卉圖案。

圖2 平鋪的100朵四瓣花卉圖案

3．放大鏡看平鋪的四瓣花

将圖2圖形中位于中心點周圍100以内的點的坐标進行球面鏡反射變換，可以實作放大鏡效果。編寫的HTML檔案内容如下。

<!DOCTYPE html>

<head>

<title>球面鏡反射變換</title>

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;

context.beginPath();

var r=140;

var x0=160;

var y0=160;

for (px=20;px<320;px+=30)

for (py=20;py<320;py+=30)

{

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

{

d=20*(1+Math.sin(12*i*dig)/5);

t=d*(0.5+Math.sin(4*i*dig)/2);

x=px+t*Math.cos(i*dig);

y=py+t*Math.sin(i*dig);

l=Math.sqrt((x-x0)*(x-x0)+(y-y0)*(y-y0));

if (l<r)

{ // 圓心為（160,160），半徑為140的圓内各點進行球面鏡反射變換

s=x-x0<0?-1:1;

if (x-x0==0) x=x0+0.1;

bt=2*Math.atan(l/r);

th=Math.atan((y-y0)/(x-x0));

m=r*Math.sin(bt);

x=s*m*Math.cos(th)+x0;

y=s*m*Math.sin(th)+y0;

}

if (i==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

在浏覽器中打開包含這段HTML代碼的html檔案，可以看到在畫布中繪制出如圖3所示的圖形放大鏡效果1。

圖3 圖形放大鏡效果1

上面程式中語句var r=140;、var x0=160;和var y0=160;用于設定放大鏡的圓心坐标和半徑。若修改r=100，x0=100，y0=100，則在畫布中繪制出如圖4所示的圖形放大鏡效果2。

圖4 圖形放大鏡效果2

JavaScript圖形執行個體：圖形放大鏡效果