JavaScript圖形實例：窗花圖案

時間 2020-06-29

標籤 javascript 圖形實例窗花圖案欄目 JavaScript 简体版

原文原文鏈接

1．窗花基本框線

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

n=25;html

r=100;java

x=r/n*cos(5*θ)+r*cos(θ);canvas

y=r/n*sin(5*θ)+r*sin(θ); （0≤θ≤2π）瀏覽器

編寫以下的HTML代碼。spa

<!DOCTYPE html>3d

<head>htm

<title>窗花基本框線</title>blog

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>

</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>

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>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出簡單的窗花圖案，如圖4所示。

圖4 簡單的窗花圖案

3．精美的窗花圖案

在上面程序的基礎上，咱們編寫以下的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,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>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出精美的窗花圖案，如圖5所示。

圖5 精美的窗花圖案

相關標籤/搜索

每日一句

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