var paper; window.onload = function(){ paper = Raphael(0,0,"100%","100%"); paper.path( getArc($(window).width()/2,$(window).height()/2,70,120) ).attr({"stroke-width":10}); }; function getArc(cx,cy,r,value) { var a =(90-value)*Math.PI/180, x = cx+r*Math.cos(a), y = cy-r*Math.sin(a), path; if(value==360){ path=[["M",cx,cy-r],["A",r,r,0,1,1,cx-0.001,cy-r]]; }else{ path=[["M",cx,cy-r], ["A",r,r,0,+(value>180),1,x,y]]; } return path; }
<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script> <div id="canvas"> <div class="text"> 120° <div id="result"></div> </div> </div>
body,html { height:100%; margin:0; } #canvas { height:99%; background:#fff; text-align:center; } .text{ letter-spacing: 0px; color:#fff; font-size:150%; position:absolute; text-align:center; top:40%; left:0%; width:100%; z-index:1; background:#000; opacity:0.5; } #result{ font-size:60%; letter-spacing: 5px; } input{ padding:3px; }