パイチャートの描画

.as

function drawPie(g:Graphics, x:Number, y:Number,
                            radius:Number, angle:Number, rotate:Number=0):void
{
    var seg:uint = 8;
    var r:Number = angle / seg;
    var sin:Number = Math.sin(r);
    var cos:Number = Math.cos(r);
    var tan:Number = Math.tan(r / 2);
    var pi2:Number = Math.PI / 2;
    var ax:Number = Math.cos(rotate) * radius;
    var ay:Number = Math.sin(rotate) * radius;
    g.moveTo(x, y);
    g.lineTo(x + ax, y + ay);
    for (var i:int = 0; i<seg; i++ ) 
    {
        var nx:Number = cos * ax - sin * ay;
        var ny:Number = cos * ay + sin * ax;
        var t:Number = (i + 1) * r - pi2 + rotate;
        var cx:Number = nx + radius * tan * Math.cos(t);
        var cy:Number = ny + radius * tan * Math.sin(t);
        g.curveTo(x + cx , y + cy, x + nx, y + ny);
        ax = nx; ay = ny;
    }
}

SVG + JavaScript

.jade

svg(width=500, height=500)
  path(d='', stroke="red", stroke-width="20", stroke-linecap="round", fill="white")

.coffee

arc = (x, y, radius, angle, rotate=0)->
  seg = 8
  r = angle / seg
  sin = Math.sin(r)
  cos = Math.cos(r)
  tan = Math.tan(r / 2)
  pi2 = Math.PI / 2
  ax = Math.cos(rotate) * radius
  ay = Math.sin(rotate) * radius
  path = ''
  path += moveTo(x + ax, y + ay)
  for i in [0...seg]
    nx = cos * ax - sin * ay
    ny = cos * ay + sin * ax
    t = (i + 1) * r - pi2 + rotate
    cx = nx + radius * tan * Math.cos(t)
    cy = ny + radius * tan * Math.sin(t)
    path += curveTo(x + cx , y + cy, x + nx, y + ny)
    ax = nx
    ay = ny
  return path

moveTo = (x, y)->
  return 'M' + x + ',' + y

lineTo = (x, y)->
  return 'L' + x + ',' + y

curveTo = (x, y, ax, ay)->
  return 'Q' + x + ',' + y + ',' + ax + ',' + ay

drawPie = ($path, ratio)->
  start = -Math.PI / 2
  end = Math.PI * 2
  pie = arc 250, 250, 230, end * ratio, start
  $path.attr('d', pie)

$pie = $('#pie')
drawPie($pie, 0.6)