JavaScript圖形實例：圖形放大鏡效果

時間 2020-07-07

標籤 javascript 圖形實例放大鏡效果欄目 JavaScript 简体版

原文原文鏈接

1. 基本四瓣花型圖案

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

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

x=t*cos(θ));java

y=t*sin(θ));canvas

編寫以下的HTML文件。瀏覽器

<!DOCTYPE html>spa

<head>htm

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

function draw(id)get

{

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

相關標籤/搜索

每日一句

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