JavaScript圖形實例：星形條紋圖案

時間 2020-06-29

標籤 javascript 圖形實例星形條紋圖案欄目 JavaScript 简体版

原文原文鏈接

1．星形條紋圖案

星形線的笛卡爾座標方程式爲：javascript

x=r*cos(θ)^3html

y=r*sin(θ)^3 （0≤θ≤2π）java

圓的笛卡爾座標方程式爲：canvas

x=r*cos(θ)瀏覽器

y=r*sin(θ) （0≤θ≤2π）spa

在星形線中繪製一個內接圓，再在內接圓中繪製一個內接星形線。編寫以下的HTML代碼。rest

<!DOCTYPE html>htm

<head>blog

<title>星形線中的圓內星形線</title>ip

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

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(200,200);

context.beginPath();

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/100) // 繪製星形線

{

x=200*Math.pow(Math.sin(theta+Math.PI/2),3);

y=-200*Math.pow(Math.cos(theta+Math.PI/2),3);

if (theta==0) context.moveTo(x,y);

else context.lineTo(x,y);

}

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/100) // 繪製內接圓

{

x=100*Math.cos(theta);

y=100*Math.sin(theta);

if (theta==0) context.moveTo(x,y);

else context.lineTo(x,y);

}

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/100) // 繪製圓內接星形線

{

x=100*Math.pow(Math.sin(theta+Math.PI/2),3);

y=100*Math.pow(Math.cos(theta+Math.PI/2),3);

if (theta==0) context.moveTo(x,y);

else context.lineTo(x,y);

}

context.stroke();

context.restore();

}

</script>

</head>

</body>

</html>

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

圖1 星形線中的圓內星形線

圖1中的圖形由大小兩個星形線和一個圓等三個部分構成，在這三個部分的圖案上每一個部分各取200個點，即在0~2π區間中從θ=0開始，每隔π/100按曲線方程求得三個點的座標值(x1,y1) 、(x2,y2)和(x3,y3)，將這三個點用兩條線段連起來，會繪製出怎樣的圖案呢？

編寫的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,400);

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(200,200);

context.beginPath();

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

{

x1=200*Math.pow(Math.sin(theta+Math.PI/2),3);

y1=-200*Math.pow(Math.cos(theta+Math.PI/2),3);

x2=100*Math.cos(theta);

y2=100*Math.sin(theta);

x3=100*Math.pow(Math.sin(theta+Math.PI/2),3);

y3=100*Math.pow(Math.cos(theta+Math.PI/2),3);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.lineTo(x3,y3);

}

context.stroke();

context.restore();

}

</script>

</head>

</body>

</html>

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

圖2 星形條紋圖案

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

context.strokeStyle="red";

context.lineWidth=1;

context.save();

context.translate(200,100);

context.beginPath();

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

{

x1=200*Math.cos(theta);

y1=100*Math.sin(theta);

x2=200*Math.pow(Math.sin(theta+Math.PI/2),3);

y2=-100*Math.pow(Math.cos(theta+Math.PI/2),3);

x3=100*Math.cos(theta);

y3=30*Math.sin(theta);

x4=100*Math.pow(Math.sin(theta+Math.PI/2),3);

y4=30*Math.pow(Math.cos(theta+Math.PI/2),3);

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.lineTo(x3,y3);

context.lineTo(x4,y4);

}

context.stroke();

context.restore();

}

</script>

</head>

</body>

</html>

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

圖3 橢圓條紋圖案1

圖3是在橢圓和橢圓式星形上分別取100個點繪製的圖案，若取更多的點，好比取300個點，即將語句「for (theta=0;theta<=2*Math.PI;theta+=Math.PI/50)」改寫爲

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

則在畫布中繪製出如圖4所示的橢圓條紋圖案2。

圖4 橢圓條紋圖案2

相關標籤/搜索

每日一句

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