CrazyEngineers
  • PraveenKumar

    PraveenKumar

    MemberDec 23, 2011

    Simple HTML5 Canvas Animation

    Hi friends,
    I thought of sharing a simple canvas animation to make a ball bounce within a square. We are going to use MooTools library in this. Okay, we have three parts:
    1. HTML
    2. CSS
    3. JavaScript

    Lets start with the HTML (just the content):
    
        

    Simple HTML5 Canvas Animation

    Lets do some styling using CSS:
    body {font: 11pt/14pt Segoe UI, Myriad Pro, Calibri, Tahoma;}
    #container {text-align: center;}
    #myCanvas {background: #fff; border: 1px solid #cbcbcb; text-align: center;}

    Now comes the JavaScript part (Just the onLoad JS):
    var context;
    var dx = 4;
    var dy = 4;
    var y = 150;
    var x = 10;
    function draw(){
        context = myCanvas.getContext('2d');
        context.clearRect(0, 0, 300, 300);
        context.beginPath();
        context.arc(x, y, 20, 0, Math.PI*2, true);
        context.closePath();
        context.fill();
        if (x < 0 || x > 300)
            dx=-dx;
        if (y < 0 || y > 300)
            dy = -dy;
            x += dx;
            y += dy;
        }
    setInterval(draw,10); 

    Now the complete code with linking the MooTools library... 😀
    
    
    
        
        Simple HTML5 Canvas Animation
        
        
    
    
    
        

    Basic Canvas Example

    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Home Channels Search Login Register