/*

my answer to the following question:

http://stackoverflow.com/questions/5646522/any-raphaeljs-guru-knows-how-to-draw-this-image

​

me:

http://twitter.com/basecode

follow me if you like svg+js+html5+objc+cocos2d related topics

*/

​

​

Raphael.fn.zeroToTenArc = function (x, y, radius, value) {

  var angle = 0;

  var endAngle = (value*360)/360;

  var path = "";

  var clockwise = -1;

  var translate = Math.PI/2;

  while(angle <= endAngle) {

    var radians= (angle/180) * Math.PI + translate;

    var cx = x + Math.cos(radians) * radius;

    var cy = y + Math.sin(radians) * radius * clockwise;

    path += (angle === 0) ? "M" : "L";

    path += [cx,cy];

    angle += 1;

 }console.log(path);

  return this.path(path);

};

​

var canvas = Raphael("hello", 500, 500);

​

canvas.zeroToTenArc(50, 50, 22, 360).animate({ stroke : "#fcc", "stroke-width" : 5, fill : "" });

canvas.zeroToTenArc(50, 50, 22, 120).animate({ stroke : "#f00", "stroke-width" : 12, fill : "" });

canvas.text(50, 50, 4.2).animate({fill: "#f00", "font-size" : "15px", stroke : ""});