jcanvascript experiment

jcanvascriptexperiment.js

function html5_canvas() {

    var $colours1, $colours2, $gradient1, $gradient2;

    jc.start("canvas_1");

    // first gradient
    var $colours1 = [
        [0, 'rgb(0,147,211)'],
        [0.5, 'rgb(255,255,255)'],
        [0.75, 'rgb(255,241,12)']
    ];
    var $gradient1 = jc.lGradient({
        x2: 400,
        y2: 350,
        colors: $colours1
    });

    // second gradient
    var $colours2 = [
        [0, 'rgb(204,0,107)'],
        [0.5, 'rgb(0,0,0)'],
        [0.75, 'rgb(0,147,211)']
    ];
    var $gradient2 = jc.lGradient({
        x1: 300,
        y1: 400,
        x2: 500,
        y2: 500,
        colors: $colours2
    });

    // circle one cyan
    jc.circle({
        x: 150,
        y: 250,
        radius: 100,
        color: $gradient1,
        fill: 1
    }).name('myCircles_2');

    // circle two magenta
    jc.circle({
        x: 300,
        y: 400,
        radius: 120,
        color: $gradient2,
        fill: 1
    }).name('myCircles_2');

    // text
    jc.text({
        string: "jCanvaScript experiment",
        x: 200,
        y: 100,
        color: 'rgb(0,0,0)',
        fill: 1
    }).font('30px sans-serif');;


    jc.start("canvas_1");

}

function draggable() {

    jc('.myCircles_2').draggable();

}

function animation() {

    jc.start('canvas_1', 160);

    // create initial shape 
    jc.circle({
        x: 90,
        y: 500,
        radius: 90,
        color: 'rgb(255,241,12)',
        fill: 1
    }).click(function (point) {

        alert("Hello!");

    }).queue(

    //animation runs in four different patterns
    //hits three different walls and then returns to start
    //animation function one

    function () {

        this.animate({
            x: 500,
            y: 90
        }, 100, {
            type: 'in',
            fn: 'linear'
        }).fadeOut(100, {
            type: 'in',
            fn: 'linear'

        });

    }, // end function one
    //animation function two

    function () {

        this.animate({
            x: 660,
            y: 600
        }, 100, {
            type: 'in',
            fn: 'linear'
        }).fadeIn(100, {
            type: 'in',
            fn: 'linear'

        });

    }, // end function two
    //animation function three

    function () {

        this.animate({
            x: 500,
            y: 660
        }, 50, {
            type: 'in',
            fn: 'linear'
        });

    }, // end function three
    //animation function four

    function () {

        this.animate({
            x: 90,
            y: 500
        }, 100, {
            type: 'in',
            fn: 'linear'
        });

    } // end function four
    ); // end q
    // use JavaScript function setTimeOut to repeat animation every 2 seconds
    setTimeout("animation()", 5000);
}


function animation_two() {

    jc.start('canvas_1');

    // circle four black
    jc.circle({
        x: 550,
        y: 500,
        radius: 90,
        color: 'rgb(0,0,0)',
        fill: 1
    }).queue(

    // animation below
    // creates pulsating circle and changed colour
    //function one

    function () {

        this.animate({
            radius: 0
        }, 300, {
            type: 'in',
            fn: 'elastic'
        });

    }, //end function one

    function () {

        this.animate({
            radius: 90
        }, 25, {
            type: 'out',
            fn: 'linear'
        });

    } // end function two
    );


}

function init() {

    // call fuctions above
    html5_canvas();
    animation();
    animation_two();
    draggable();
}

// call init function
window.addEventListener("load", init, false);