JavaScript圖形實例：蝴蝶結圖案

時間 2020-06-29

標籤 javascript 圖形實例蝴蝶結圖案欄目 JavaScript 简体版

原文原文鏈接

1．長短瓣相間的蝴蝶結

設定曲線的座標方程爲：javascript

b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ));html

x1=b*cos(θ);java

x2=b*cos(θ+π/8);canvas

y1=b*Math.sin(θ);瀏覽器

y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5）函數

在0~2π區間中從θ=0開始，每隔π/360按曲線方程求得兩個點的座標值(x1,y1)和(x2,y2)，並將求得的兩點連成一條線段，這樣，能夠獲得一個長短瓣相間的蝴蝶結圖案。3d

編寫以下的HTML代碼。htm

<!DOCTYPE html>blog

<head>ip

<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,400,300);

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

var n=3;

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/360)

{

e=60*(1+Math.cos(n*theta)/4);

f=e*(1+Math.sin(2*n*theta));

x1=200+f*Math.cos(theta);

x2=200+f*Math.cos(theta+Math.PI/8);

y1=150-f*Math.sin(theta);

y2=150-f*Math.sin(theta+Math.PI/8);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出的長短各三瓣相間的蝴蝶結圖案，如圖1所示。

圖1 長短各三瓣相間的蝴蝶結

若將上面代碼中的「var n=3;」改寫爲「var n=2;」或「var n=4;」在在瀏覽器窗口中會分別繪製出的長短各兩瓣或長短各四瓣相間的蝴蝶結圖案，如圖2和圖3所示。

圖2 長短各兩瓣相間的蝴蝶結

圖3 長短各四瓣相間的蝴蝶結

還能夠將上面求取座標的三角函數加上不一樣的相位，例如將代碼中的語句

「y1=150-f*Math.sin(theta);」改寫爲「y1=150-f*Math.sin(theta+Math.PI/4);」，則在畫布中繪製的圖案如圖4所示。

圖4 Y1中SIN函數加上相位後繪製的圖案

2．長短瓣相間的蝴蝶結的繪製過程

將長短瓣相間的蝴蝶結的繪製過程進行動態展現，編寫的HTML文件內容以下。

<!DOCTYPE html>

<head>

<title>長短瓣相間的蝴蝶結繪製過程的動態展現</title>

var context;

var n;

var theta;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,300);

n=2;

theta=0;

setInterval(go,30);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

e=60*(1+Math.cos(n*theta)/4);

f=e*(1+Math.sin(2*n*theta));

x1=200+f*Math.cos(theta);

x2=200+f*Math.cos(theta+Math.PI/8);

y1=150-f*Math.sin(theta);

y2=150-f*Math.sin(theta+Math.PI/8);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.closePath();

context.stroke();

theta+=Math.PI/360;

if (theta>2*Math.PI)

{

n++; if (n>5) n=2;

theta=0;

context.clearRect(0,0,400,300);

}

</script>

</head>

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中呈現出長短相間的蝴蝶結圖案從各兩瓣到三瓣再到四瓣直到五瓣的繪製過程，如圖5所示。

圖5 長短瓣相間的蝴蝶結繪製過程的動態展現

相關標籤/搜索

每日一句

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