Canvas example with Cake

From Devipedia

Latest revision as of 15:20, 16 March 2010

This is a example of using the canvas element using the Cake javascript library. I took a basic example I found on the web and modified it to provide the animation you see on my home page. If you followed a linked called 'view source' but did not see an animation, you are likely using an IE browser.

function draw() {
    var c = document.getElementById("canvas");
    var CAKECanvas = new Canvas(c, 275, 60);

    var offset = 1;
    for (x=0;x<5;x++) {
        var circle1 = new Circle(x*40, {
                    id: 'myCircle1',
                    x: CAKECanvas.width / 2,
                    y: CAKECanvas.height / 2,
                    stroke: 'black',
                    strokeWidth: 20,
                    endAngle: Math.PI*4
                }
            );

        circle1.addFrameListener(
                function(t, dt)
                {
                    offset += 2;
                    if (offset > 3100) offset = 1;
                    this.scale = Math.sin(offset / 1000);
                }
            );

        CAKECanvas.append(circle1);

        }
        var hello = new ElementNode(E('h2', 'HTML Canvas'),
            {
                fontFamily: 'Arial, Sans-serif',
                noScaling: true,
                color: 'white',
                x: CAKECanvas.width / 2,
                y: CAKECanvas.height / 2,
                align: 'center',
                valign: 'center'
            }
        );

        CAKECanvas.append(hello);
    }