Raphael playground effect and fill opacity

I wrote the following code:

var w = 800;
var h = 600;

var paper = Raphael(0, 0, w, h);

paper.image("http://static.pourfemme.it/pfmoda/fotogallery/625X0/63617/borsa-alviero-martini-rodeo-drive.jpg", 0, 0, w, h); 

var c = paper.circle(400, 300, 1);

c.attr({stroke: "#999", "stroke-width": w*2});

anim = Raphael.animation({r: w*2}, 6000);

c.animate(anim.delay(100));

      

( http://jsfiddle.net/qAgy7/ )

I need to render a background image when the circle increases its radius, however I have the following problems:

  • I don't understand why the animation is slow
  • Chrome does the effect differently (I see a polygon, not a circle like in Firefox and IE)

Can anyone help me?

+3


source to share





All Articles