JavaScript圖形實例：合成花卉圖

時間 2019-12-20

標籤 javascript 圖形實例合成花卉欄目 JavaScript 简体版

原文原文鏈接

咱們知道在直角座標系中，圓的方程可描述爲：javascript

X=R*COS(α)html

Y=R*SIN(α)java

用循環依次取α值爲0~2π，計算出X和Y,在canvas畫布中將座標點（X,Y）用線連起來，可繪製出一個圓。編寫HTML文件內容以下：canvas

<!DOCTYPE html>瀏覽器

<head>orm

<title>圓的繪製</title>htm

function draw(id)ip

{ci

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=2;

var dig=Math.PI/180;

context.beginPath();

var r=100;

for (var i=0;i<=360;i++)

{

x=200+r*Math.cos(i*dig);

y=150+r*Math.sin(i*dig);

if (i==0)

{

context.moveTo(x,y);

bx=x; by=y;

}

else

context.lineTo(x,y);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

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

圖1 圓的繪製

1．圓和正弦波合成的花卉圖

先在HTML頁面中設置一個畫布。

</canvas>

再在定義的這塊400*300的canvas（畫布）上面用循環（0~2π）繪製圓和正弦波合成的花卉圖。

繪製圖案的基本思想是：將圓的方程與一個正弦波進行迭加，即設立座標計算公式爲：

X=R*COS(α)*（0.5+SIN(6α)/2）

Y=R*SIN(α) *（0.5+SIN(6α)/2）

再用循環依次取α值爲0~2π，計算出X和Y,在canvas畫布中將座標點（X,Y）用線連起來，可繪製出一個封閉曲線圖形，而後將該圖形填充顏色，可獲得一個花卉圖案。

可編寫以下的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,400,300);

context.fillStyle="red";

context.strokeStyle="white";

context.lineWidth=2;

var dig=Math.PI/180;

context.beginPath();

var r=100;

for (var i=0;i<=360;i++)

{

c=r*(1/2.0+Math.sin(6*i*dig)/2);

x=200+c*Math.cos(i*dig);

y=150+c*Math.sin(i*dig);

if (i==0)

{

context.moveTo(x,y);

bx=x; by=y;

}

else

context.lineTo(x,y);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖2所示的圓和正弦波合成的花卉圖。

圖2 圓和正弦波合成的花卉圖

2．可設置合成方式的圓和正弦波合成花卉圖

在上面的代碼中，語句「c=r*(1/2.0+Math.sin(6*i*dig)/2);」中的6表示繪製的花卉圖案的花瓣數目，0.5（1/2）表示將圓和正弦波合成時，圓所佔的比例，若是修改這兩個值，將繪製出不一樣的花卉圖案。

咱們能夠在瀏覽器窗口中定義一個表單，經過表單能夠設置花瓣數目，還能夠設置圓和正弦波合成時的比例，這樣輸入相應參數值後，再單擊「肯定」按鈕繪製合成花卉圖案。

編寫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,500,300);

context.fillStyle="red";

context.strokeStyle="white";

context.lineWidth=2;

var dig=Math.PI/180;

context.beginPath();

var r=100;

var n=eval(document.myForm.petalNum.value);

var a=eval(document.myForm.circle.value);

var b=eval(document.myForm.sineWave.value);

var prop=a/(a+b);

for (var i=0;i<=360;i++)

{

c=r*(prop+(1-prop)*Math.sin(n*i*dig));

x=250+c*Math.cos(i*dig);

y=150+c*Math.sin(i*dig);

if (i==0)

{

context.moveTo(x,y);

bx=x; by=y;

}

else

context.lineTo(x,y);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<body>

花瓣數<input type=number name="petalNum" value=6 size=2>

合成比例 &nbsp圓：正弦波=<input type=number name="circle" value=1 size=2>：<input type=number name="sineWave" value=1 size=2>

</form><br>

<canvas id="myCanvas" width="500" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，在表單的「花瓣數」數字框中輸入「20」，「合成比例」對應的兩個數字框中輸入「1」和「1」，單擊「肯定」按鈕，能夠看到在瀏覽器窗口中繪製出如圖3所示的20瓣花卉圖案。若在表單的「花瓣數」數字框中輸入「8」，「合成比例」對應的兩個數字框中輸入「2」和「10」，單擊「肯定」按鈕，能夠看到在瀏覽器窗口中繪製出如圖4所示的8瓣花卉圖案。

圖3 20瓣花卉圖案

圖4 8瓣花卉圖案

3．圓和三次諧波合成的花卉圖

前面是將圓的方程與一個正弦波進行迭加，若將一個圓與一個三次諧波合成，可設立座標計算公式爲：

X=R*（1+SIN(3*6α)/5）*（0.5+SIN(6α)/2）*COS(α)

Y=R*（1+SIN(3*6α)/5）*（0.5+SIN(6α)/2）*SIN(α)

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

context.fillStyle="red";

context.strokeStyle="white";

context.lineWidth=2;

var dig=Math.PI/180;

context.beginPath();

var r=100;

for (var i=0;i<=360;i++)

{

b=r+r/5*Math.sin(3*6*i*dig);

c=b*(1/2.0+Math.sin(6*i*dig)/2);

x=200+c*Math.cos(i*dig);

y=150+c*Math.sin(i*dig);

if (i==0)

{

context.moveTo(x,y);

bx=x; by=y;

}

else

context.lineTo(x,y);

}

context.lineTo(bx,by);

context.closePath();

context.stroke();

context.fill();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖5所示的圓和三次諧波合成的花卉圖。

圖5 圓和三次諧波合成的花卉圖

若將合成計算式中的（1+SIN(3*6α)/5）改寫爲（1+SIN(5*6α)/5），也就是將語句「b=r+r/5*Math.sin(3*6*i*dig);」改寫爲「b=r+r/5*Math.sin(5*6*i*dig);」，再在瀏覽器中打開修改後的html文件，能夠看到在瀏覽器窗口中繪製出如圖6所示的圓和五次諧波合成的花卉圖。

圖6 圓和五次諧波合成的花卉圖