Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  HTML5

How to draw pentagram in HTML5 canvas

  nesro.cz      2012-04-23 12:56:06      3,936    0    1

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

Apple Pencil and iPad Pro?

By sonic0002
You can see other things Steve JObs hates doing but his successor Tim Cook did here.