1. Five-pointed star
Taking a radius of five points on the circumference 80, with five points which are sequentially connected end to end drawing lines 5 can be drawn a five-pointed star pattern.
Write HTML code below.
<!DOCTYPE html>
<head>
<Title> pentagram (a) </ 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="#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)
{
where dx = 0;
was dy = 0;
where the 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);
were you = 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>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "400" height = "300"> Your browser does not support the canvas!
</canvas>
</body>
</html>
To store the HTML code to an html text file, and then open a html file this HTML code in a browser, a five-pointed star pattern drawing can be seen in a browser window, as shown in FIG.
A five-pointed star pattern of FIG. 1
It can also be done by drawing a pentagram drawn by 10 lines. Content written in HTML file is as follows.
<!DOCTYPE html>
<head>
<Title> pentagram (ii) </ 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="#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)
{
There 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>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "400" height = "300"> Your browser does not support the canvas!
</canvas>
</body>
</html>
To store the HTML code to an html text file, and then open a html file this HTML code in a browser, a five-pointed star pattern drawing can be seen in the browser window 2, as shown in FIG.
Figure 2 five-pointed star pattern 2
2. Spiral Pentagram
The foregoing five-pointed star with appropriate scaling and rotation process, the coil can be drawn five-pointed star pattern. Write HTML code below.
<!DOCTYPE html>
<head>
<Title> spiral pentagram </ 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="#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)
{
where dx = 100;
was dy = 0;
where the 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);
were you = 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>
<body onload="draw('myCanvas');">
<Canvas id = "myCanvas" width = "350" height = "300"> Your browser does not support the canvas!
</canvas>
</body>
</html>
Open the html file contain this HTML code in a browser, the browser can be seen in the drawing the window pentagram spiral pattern, as shown in FIG.
FIG. 3 spiral pentagram