Zend Certified Engineer

phpguru.org

Quality PHP and Javascript code
Download RGraph: HTML5 canvas graph library... Home ~ Downloads ~ FAQs ~ Licensing
RSS Feed RSS Feed
Follow me on Twitter Follow me on Twitter

Add to Google...

HTML5 & CSS3

Articles

Javascript

PHP5

PHP4






Bookmark with delicious tweet this site Post to Google Buzz! Stumble! this site

Turn the smiley!

I found this here, and had a bit of a play, and ended up with this. Not that it's of any particular use, but it looks kinda cute... If you want to look at the inner workings (...?), then they are shown below for your viewing pleasure...


<script type="text/javascript">
    translated = false;

    TurnTheSmiley = function ()
    {
        canvas = document.getElementById("myCanvas");
        ctx    = canvas.getContext('2d');
        ctx.lineWidth = 2;

        if (!translated) {
            ctx.translate(75,75);
            translated = true;
        }
        
        ctx.beginPath();
        ctx.fillStyle = 'yellow';
        ctx.arc(0,0,50,0,Math.PI*2,true); // Outer circle
        ctx.stroke();
        ctx.fill();
        
        ctx.beginPath();
        ctx.arc(0,0,35,0,3.14,false);   // Mouth
        ctx.stroke();
        
        ctx.beginPath();
        ctx.fillStyle = 'black';
        ctx.arc(-10,-10,5,0,Math.PI*2,true);  // Left eye
        ctx.fill();
        
        ctx.beginPath();
        ctx.arc(15,-10,5,0,Math.PI*2,true);  // Right eye
        ctx.fill();
        


        /**
        * Finally, rotate the canvas
        */
        ctx.rotate(0.1);

        setTimeout(TurnTheSmiley, 40);
    }
    
    TurnTheSmiley();
<script>


RGraph: HTML5 canvas graph library

Example graph made using RGraph

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.