JavaScript圖形實例：線段構圖

時間 2019-12-29

原文原文鏈接

在「JavaScript圖形實例：四瓣花型圖案」和「JavaScript圖形實例：蝴蝶結圖案」中，咱們繪製圖形時，主要採用的方法是先根據給定的曲線參數方程計算出兩點座標，而後將兩點用線段鏈接起來，線段的集合會構成一幅幅精美的圖形。下面咱們繼續給出一些用線段構造圖形的實例，供你們欣賞和借鑑。javascript

1．莫爾花紋圖案

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

b=r*(1+ sin(2.5*θ)/2);java

x1=b*cos(θ);canvas

x2=b*cos(θ+π/4);瀏覽器

y1=b* sin(θ);spa

y2=b* sin(θ+π/4); （0≤θ≤4π）3d

在0~4π區間中從θ=0開始，每隔π/180按曲線方程求得兩個點的座標值(x1,y1)和(x2,y2)，並將求得的兩點連成一條線段，這樣，能夠繪製出莫爾花紋圖案。rest

編寫以下的HTML代碼。htm

<!DOCTYPE html>blog

<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.strokeStyle="red";

context.lineWidth=1;

context.beginPath();

for (i=0;i<=720;i++)

{

a=i*Math.PI/180;

e=100*(1+Math.sin(2.5*a)/2);

x1=200+e*Math.cos(a);

x2=200+e*Math.cos(a+Math.PI/4);

y1=150-e*Math.sin(a);

y2=150-e*Math.sin(a+Math.PI/4);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

</body>

</html>

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

圖1 莫爾花紋圖案

2．環片圖案

設定曲線的座標方程爲：

d=100

e=50

m=d+d/3*(1+cos(8*i*dig)/2)*cos(i*dig);

n=e+e/2*(1+sin(8*i*dig)/2)*cos(i*dig);

x1=5*m*cos(i*dig)/4;

x2=5*n*cos(i*dig)/4;

p=d+d/3*(1+cos(10*i*dig)/2)*sin(i*dig);

q=e+e/2*(1+cos(8*i*dig)/2)*sin(i*dig);

y1=p*sin(i*dig);

y2=q* sin(i*dig); （0≤θ≤2π）

在0~2π區間中從θ=0開始，每隔π/128按曲線方程求得兩個點的座標值(x1,y1)和(x2,y2)，並將求得的兩點連成一條線段，這樣，能夠繪製出環片圖案。

編寫以下的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="red";

context.lineWidth=2;

var dig=Math.PI/128;

context.beginPath();

var d=100; e=50;

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

{

m=d+d/3*(1+Math.cos(8*θ)/2)*Math.cos(θ);

n=e+e/2*(1+Math.sin(8*θ)/2)*Math.cos(θ);

x1=100+5*m*Math.cos(θ)/4;

x2=100+5*n*Math.cos(θ)/4;

p=d+d/3*(1+Math.cos(10*θ)/2)*Math.sin(θ);

q=e+e/2*(1+Math.cos(8*θ)/2)*Math.sin(θ);

y1=160-p*Math.sin(θ);

y2=160-q*Math.sin(θ);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

}

context.closePath();

context.stroke();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出由線段構成的環片圖案，如圖2所示。

圖2 線段構成的環片圖案

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,600,400);

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(300,200);

context.beginPath();

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/160)

{

x1=30*Math.cos(theta);

y1=15*Math.sin(theta);

a=60*(1+Math.sin(3*theta)/6);

b=100*(1+Math.sin(4*theta)/6);

c=140*(1+Math.sin(5*theta)/6);

d=180*(1+Math.sin(6*theta)/8);

x2=a*Math.cos(theta+Math.PI/20);

y2=a*Math.sin(theta+Math.PI/20);

x3=b*Math.cos(theta);

y3=b*Math.sin(theta);

x4=c*Math.cos(theta+Math.PI/20);

y4=c*Math.sin(theta+Math.PI/20);

x5=1.5*d*Math.cos(theta);

y5=d*Math.sin(theta);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.lineTo(x3,y3);

context.lineTo(x4,y4);

context.lineTo(x5,y5);

}

context.stroke();

context.restore();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出由線段構成的立體條紋圖案，如圖3所示。

圖3 立體條紋圖案

相關標籤/搜索

每日一句

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