How to draw pentagram in HTML5 canvas

  nesro.cz        2012-04-23 12:56:06       8,447        0    

I wrote simple function to this magical symbol I like so much:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html>
<body>
    <canvas id="c" width="500" height="500"></canvas>
    <script>
 
var ctx = (document.getElementById("c")).getContext("2d");
 
// draws rotated pentagram with or without cirle
function pentagram( ctx, x, y, radius, rotate, circle )
{
    ctx.beginPath();
 
    for ( var i = 0; i <= 4 * Math.PI; i += ( 4 * Math.PI ) / 5 ) {
        ctx.lineTo( x + radius * Math.cos(i + rotate), y + radius * Math.sin(i + rotate));
    }
 
    if ( circle ) {
        ctx.moveTo( x + radius, y );
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    }
 
    ctx.stroke();
}
 
pentagram ( ctx, 250, 250, 60, Math.PI/2, true);
 
        </script>
    </body>
</html>

Results (on Chromium 10 on GNU/Linux) with and without circles are here:

Source : http://nesro.cz/how-to-draw-pentagram-in-html5-canvas/

HTML 5  CANVAS  PENTAGRAM  

       

  RELATED

  0 COMMENT

No comment for this article.


  RANDOM FUN

Introducing MacBook Page Pro