JavaScript圖形實例：五角星

時間 2019-12-22

標籤 javascript 圖形實例五角星欄目 JavaScript 简体版

原文原文鏈接

1．五角星

在半徑爲80的圓周上取5個點，用這5個點依次首尾鏈接畫5條線，能夠繪製出一個五角星圖案。javascript

編寫以下的HTML代碼。html

<!DOCTYPE html>java

<head>canvas

<title>五角星（一）</title>瀏覽器

function draw(id)blog

{ip

var canvas=document.getElementById(id);get

if (canvas==null)it

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEDD";

context.fillRect(0,0,400,300);

context.translate(100,150);

context.strokeStyle = 'red';

draw5Star(context);

context.stroke();

context.translate(200,0);

context.fillStyle = 'red';

draw5Star(context);

context.fill();

}

function draw5Star(context)

{

var dx = 0;

var dy = 0;

var radius = 80;

context.beginPath();

var x = radius*Math.sin(Math.PI / 5)+dx;

var y = radius*Math.cos(Math.PI / 5)+dy;

context.moveTo(x,y);

var dig = Math.PI / 5 * 4;

for(var i = 1; i < 5; i++)

{

var x = radius*Math.sin(i * dig+Math.PI / 5);

var y = radius*Math.cos(i * dig+Math.PI / 5);

context.lineTo(dx+x,dy+y);

}

context.closePath();

}

</script>

</head>

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

</canvas>

</body>

</html>

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

圖1 五角星圖案1

也能夠經過繪製10條線的方式來完成五角星的繪製。編寫的HTML文件的內容以下。

<!DOCTYPE html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEDD";

context.fillRect(0,0,400,300);

context.translate(100,150);

context.strokeStyle = 'red';

draw5Star(context);

context.stroke();

context.translate(150,150);

context.fillStyle = 'red';

draw5Star(context);

context.fill();

}

function draw5Star(context)

{

var r = 80;

context.beginPath()

context.moveTo(r,0);

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

{

context.rotate(Math.PI/5);

if(i%2 == 0)

context.lineTo((r/2),0);

else

context.lineTo(r,0);

}

context.closePath();

}

</script>

</head>

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

</canvas>

</body>

</html>

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

圖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="#EEEEDD";

context.fillRect(0,0,350,300);

context.translate(180,30);

context.fillStyle = 'rgba(255,0,255,0.25)';

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

{

context.translate(25,25);

context.scale(0.95,0.95);

context.rotate(Math.PI / 10);

draw5Star(context);

context.fill();

}

function draw5Star(context)

{

var dx = 100;

var dy = 0;

var radius = 50;

context.beginPath();

var x = radius*Math.sin(Math.PI / 5)+dx;

var y = radius*Math.cos(Math.PI / 5)+dy;

context.moveTo(x,y);

var dig = Math.PI / 5 * 4;

for(var i = 1; i < 5; i++)

{

var x = radius*Math.sin(i * dig+Math.PI / 5);

var y = radius*Math.cos(i * dig+Math.PI / 5);

context.lineTo(dx+x,dy+y);

}

context.closePath();

}

</script>

</head>

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

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出螺旋五角星圖案，如圖3所示。

圖3 螺旋五角星

相關標籤/搜索

每日一句

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