Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  HTML5

How to draw pentagram in HTML5 canvas

  nesro.cz      2012-04-23 12:56:06      4,629    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

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

Usain Bolt : Oh no!

By sonic0002
Usain Bolt won the 200m short run gold medal in Beijing.  When he wlked off the track, he was suddenly hit by a camera man. Oh, no. This should be seen on a football court only.