1．星形條紋圖案
星形線的笛卡爾坐標方程式為：
x=r*cos(θ)^3
y=r*sin(θ)^3 （0≤θ≤2π）
圓的笛卡爾坐標方程式為：
x=r*cos(θ)
y=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,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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400"></canvas>
</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>
<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,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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在畫布中繪制出的星形條紋圖案，如圖2所示，
圖2 星形條紋圖案
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,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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="200"></canvas>
</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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53630.html
標籤：JavaScript