1．長短瓣相間的蝴蝶結
設定曲線的坐標方程為：
b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ));
x1=b*cos(θ);
x2=b*cos(θ+π/8);
y1=b*Math.sin(θ);
y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5）
在0~2π區間中從θ=0開始，每隔π/360按曲線方程求得兩個點的坐標值(x1,y1)和(x2,y2)，并將求得的兩點連成一條線段，這樣，可以得到一個長短瓣相間的蝴蝶結圖案，
撰寫如下的HTML代碼，
<!DOCTYPE html>
<head>
<title>長短瓣相間的蝴蝶結</title>
<script type="text/javascript">
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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</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>
<script type="text/javascript">
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>
<body onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;">
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中呈現出長短相間的蝴蝶結圖案從各兩瓣到三瓣再到四瓣直到五瓣的繪制程序，如圖5所示，
圖5 長短瓣相間的蝴蝶結繪制程序的動態展示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53633.html
標籤：JavaScript