設有坐標計算公式如下：
X=L*(1+SIN(4α))*COS(α)
Y=L*(1+SIN(4α))*SIN(α)
用循環依次取α值為0~2π，計算出X和Y,在canvas畫布中對坐標位置（X,Y）描點，可繪制出一個曲線圖形。編寫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);
for (i=0;i<=720;i++)
{
a=i*Math.PI/360;
e=80*(1+Math.sin(4*a));
x1=200+e*Math.cos(a);
y1=150+e*Math.sin(a);
context.fillText('.',x1,y1);
context.fillStyle="red";
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出如圖1所示的曲線。
圖1 用三角函數繪制曲線
1．四瓣花型圖案
先在HTML頁面中設置一個畫布。
<canvas id="myCanvas" width="400" height="300">
</canvas>
再在定義的這塊400*300的canvas（畫布）上面用循環（0~2π）繪制四瓣花型圖案。
繪制圖案的基本思想是：
設立坐標計算公式如下：
X1=L*(1+SIN(4α))*COS(α)
Y1=L*(1+SIN(4α))*SIN(α)
X2=L*(1+SIN(4α))*COS(α+π/5)
Y2=L*(1+SIN(4α))*SIN(α+π/5)
以（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();
for (i=0;i<=720;i++)
{
a=i*Math.PI/360;
e=80*(1+Math.sin(4*a));
x1=200+e*Math.cos(a);
x2=200+e*Math.cos(a+Math.PI/5);
y1=150+e*Math.sin(a);
y2=150+e*Math.sin(a+Math.PI/5);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出如圖2所示的四瓣花型圖案。
圖2 四瓣花型圖案
在上面的代碼中語句“e=80*(1+Math.sin(4*a));”中的4表示繪制四瓣花型圖案，若將4改寫為3~8之間的任一整數，可以畫出3~8瓣花型圖案，如圖3所示。
圖3 3瓣花型、5瓣花型、6瓣花型圖案
2．瓣頂有折皺的四瓣花型圖案
我們可以給繪制的花瓣圖案加上變形系數，即把前面的代碼中的語句“e=80*(1+Math.sin(4*a));”改寫為“e=80*(1+Math.sin(12*a));”。完整的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();
for (i=0;i<=720;i++)
{
a=i*Math.PI/360;
e=80*(1+Math.sin(12*a)/4);
f=e*(1+Math.sin(4*a));
x1=200+f*Math.cos(a);
x2=200+f*Math.cos(a+Math.PI/5);
y1=150-f*Math.sin(a);
y2=150-f*Math.sin(a+Math.PI/5);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出如圖4所示的瓣頂有折皺的四瓣花型圖案。
圖4 瓣頂有折皺的四瓣花型圖案
將上面JavaScript代碼中的語句“e=80*(1+Math.sin(12*a)/4);”改寫為“e=80*(1+Math.cos(12*a)/4);”即SIN函數改用COS函數，將在瀏覽器窗口中繪制出如圖5所示的變形四瓣花型圖案1。
圖5 變形的四瓣花型圖案1
若再將JavScript代碼中的
語句“y1=150-f*Math.sin(a);”改寫為“y1=150-f*Math.sin(a)/2;”，
語句“y2=150-f*Math.sin(a+Math.PI/5);”改寫為“y2=150-f*Math.sin(a+Math.PI/5)/2;”，即圖形的垂直方向上壓縮一半，將在瀏覽器窗口中繪制出如圖6所示的變形四瓣花型圖案2。
圖6 變形的四瓣花型圖案2
3．可設置參數的變形的多瓣花型圖案
從上面的程序運行示例可以看出，繪制花瓣圖案時，可以設置花瓣數，還可以設置花瓣的變形系數。我們可以通過在瀏覽器窗口的頁面中輸入相應參數值，然后單擊“確定”按鈕繪制花瓣圖案。編寫的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=eval(document.myForm.petalNum.value);
var k=eval(document.myForm.shape.value);
for (i=0;i<=720;i++)
{
a=i*Math.PI/360;
e=80*(1+Math.sin(n*k*a)/4);
f=e*(1+Math.sin(n*a));
x1=200+f*Math.cos(a);
x2=200+f*Math.cos(a+Math.PI/5);
y1=150-f*Math.sin(a);
y2=150-f*Math.sin(a+Math.PI/5);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body>
<form name="myForm">
花瓣數<input type=number name="petalNum" value=4 size=3>
變形系數：<input type=number name="shape" value=1 size=3>
<input type=button value="確定" onClick="draw('myCanvas');">
</form><br>
<canvas id="myCanvas" width="500" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，在表單的“花瓣數”數字框中輸入“4”，“變形系數”數字框中輸入“2”，單擊“確定”按鈕，可以看到在瀏覽器窗口中繪制出如圖7所示的變形四瓣花型圖案3。若在表單的“花瓣數”數字框中輸入“5”，“變形系數”數字框中輸入“3”，單擊“確定”按鈕，可以看到在瀏覽器窗口中繪制出如圖8所示的變形五瓣花型圖案。
圖7 變形的四瓣花型圖案3
圖8 變形的五瓣花型圖案
4．其它變形的四瓣花型圖案
實際上，我們還可以修改程序中變量e、f的計算表達式，繪制出更另類的四瓣花型圖案。例如，可以編寫如下的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();
for (i=0;i<=720;i++)
{
a=i*Math.PI/360;
e=80*(1+Math.cos(12*a)/3);
f=e*(1+Math.sin(4*a)*3/7);
x1=200+f*Math.cos(a);
x2=200+f*Math.cos(a+Math.PI/3);
y1=150-f*Math.sin(a);
y2=150-f*Math.sin(a+Math.PI/3);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！
</canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出如圖9所示的另類變形的四瓣花型圖案。
圖9 另類變形的四瓣花型圖案
5．四瓣花型圖案繪制過程的動態展示
我們可以將四瓣花型圖案繪制過程進行動態展示，編寫HTML文件如下。
<!DOCTYPE html>
<head>
<title>四瓣花型圖案繪制過程的動態展示</title>
<script type="text/javascript">
var context;
var n;
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=0;
setInterval(go,50);
}
function go()
{
n=n+1;
if (n>720)
{
n=0;
context.clearRect(0,0,400,300);
}
context.strokeStyle="red";
context.lineWidth=1;
context.beginPath();
a=n*Math.PI/360;
e=80*(1+Math.sin(4*a));
x1=200+e*Math.cos(a);
x2=200+e*Math.cos(a+Math.PI/5);
y1=150+e*Math.sin(a);
y2=150+e*Math.sin(a+Math.PI/5);
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中看到四瓣花型圖案的動態繪制過程，如圖10所示。
圖10 四瓣花型圖案的動態繪制過程