JavaScript圖形例項：窗花圖案
1．窗花基本框線
設定曲線的座標方程為：
n=25;
r=100;
x=r/n*cos(5*θ)+r*cos(θ);
y=r/n*sin(5*θ)+r*sin(θ); （0≤θ≤2π）
編寫如下的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,300,300);
context.strokeStyle="blue";
context.lineWidth=2;
context.beginPath();
var n=25;
var r=100;
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/180)
{
x=150+r/n*Math.cos(5*theta)+r*Math.cos(theta);
y=150+r/n*Math.sin(5*theta)+r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
將上述HTML程式碼儲存到一個html文字檔案中，再在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中繪製出如圖1所示的一條閉合曲線。
圖1 n=25，r=100時的閉合曲線
上述程式碼中，引數n和r可以根據需要進行設定，r的含義相當於閉合曲線的半徑（實際的閉合曲線半徑會比r大一些），r/n的比值給定閉合曲線的平滑度，r/n越大，閉合曲線的旋結越大。例如，n=5，r=100時繪製的閉合曲線如圖2所示。n=2，r=100時繪製的閉合曲線如圖3所示。
圖2 n=5，r=100時的閉合曲線
圖3 n=2，r=100時的閉合曲線
2．簡單的窗花圖案
我們採用圖1所示的閉合曲線作為外框線，圖3所示的閉合曲線作為內部圖案線（r值需要適當減小，使得繪製的曲線不會超出外框線），可以繪製出簡單的窗花圖案。編寫的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,300,300);
context.strokeStyle="blue";
context.lineWidth=2;
context.beginPath();
var n=25;
var r=100;
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/180)
{
x=150+r/n*Math.cos(5*theta)+r*Math.cos(theta);
y=150+r/n*Math.sin(5*theta)+r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
var n=2;
var r=50;
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/180)
{
x=150+r/n*Math.cos(5*theta)+r*Math.cos(theta);
y=150+r/n*Math.sin(5*theta)+r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
將上述HTML程式碼儲存到一個html文字檔案中，再在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中繪製出簡單的窗花圖案，如圖4所示。
圖4 簡單的窗花圖案
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,300,300);
context.strokeStyle="blue";
context.lineWidth=2;
context.beginPath();
var n=25;
for (r=100;r<=115;r+=5)
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/180)
{
x=150+r/n*Math.cos(5*theta)+r*Math.cos(theta);
y=150+r/n*Math.sin(5*theta)+r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
var r=45;
for (n=1;n<=4;n++)
for (theta=0;theta<=2*Math.PI;theta+=Math.PI/180)
{
x=150+r/n*Math.cos(5*theta)+r*Math.cos(theta);
y=150+r/n*Math.sin(5*theta)+r*Math.sin(theta);
if (theta==0)
context.moveTo(x,y);
else
context.lineTo(x,y);
}
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
將上述HTML程式碼儲存到一個html文字檔案中，再在瀏覽器中開啟包含這段HTML程式碼的html檔案，可以看到在畫布中繪製出精美的窗花圖案，如圖5所示。
圖5 精美的窗花圖案