Ejemplo animación loop¶

// crear instancia de canvas-event
var ce = Cevent("canvas"),
    width = ce.width,
    height = ce.height;

function randint(i) {
    return parseInt(Math.random()*i);
}

function randcolor() {
    return "rgb(" + [randint(255), randint(255), randint(255)] + ")";
}

for (var i = 0; i < 50; i++) {
    ce.circle(randint(width), randint(height), randint(25)+5)
    .attr({
        fill: randcolor(),
        alpha: Math.random(),
        // atributos adicionales
        velx: Math.random(),
        vely: Math.random(),
    });
}

// guardar todos los circulos
var circles = ce.getAll("circle");

ce.loop(function(c){
    var circle, l = circles.length;

    // por cada circulo
    for (var i = 0; i < l; i++) {
        circle = circles[i];
        // desplazar
        circle.x += circle.velx;
        circle.y += circle.vely;

        // cambiar dirección si choca con el borde
        if (circle.x >= width || circle.x <= 0)
            circle.velx *= -1;
        if (circle.y >= height || circle.y <= 0)
            circle.vely *= -1;
    }
});