Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Web =>  HTML5

How to draw pentagram in HTML5 canvas

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

Another Internet Explorer joke

By sonic0002
If Internet Explorer is brave enough to ask you to be your default browser, you're brave enough to ask that girl out. Do we have to be so cruel to IE?