在圆弧周围绘制文本17

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),

    CENTROID_RADIUS = 10,
    CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)',
    CENTROID_FILL_STYLE ='rgba(80, 190, 240, 0.6)',

    GUIDEWIRE_STROKE_STYLE = 'goldenrod',
    GUIDEWIRE_FILL_STYLE = 'rgba(85, 190, 240, 0.6)',

    TEXT_FILL_STYLE = 'rgba(100, 130, 240, 0.5)',
    TEXT_STROKE_STYLE = 'rgba(200, 0, 0, 0.7)',
    TEXT_SIZE = 64,

    GUIDEWIRE_STROKE_STYLE = 'goldenrod',
    GUIDEWIRE_FILL_STYLE = 'rgba(85, 190, 240, 0.6)',

    circle = { x: canvas.width/2,
               y: canvas.height/2,
               radius: 200
             };

// Functions.....................................................

function drawGrid(color, stepx, stepy) {
  
}

// Drawing functions.............................................

function drawCentroid() {

}

function drawCircularText(string, startAngle, endAngle) {
   var radius = circle.radius,
       angleDecrement = (startAngle - endAngle)/(string.length-1),
       angle = parseFloat(startAngle),
       index = 0,
       character;

   context.save();
   context.fillStyle = TEXT_FILL_STYLE;
   context.strokeStyle = TEXT_STROKE_STYLE;
   context.font = TEXT_SIZE + 'px Lucida Sans'; 

   while (index < string.length) {
      character = string.charAt(index);

      context.save();
      context.beginPath();

      context.translate(
         circle.x + Math.cos(angle) * radius,
         circle.y - Math.sin(angle) * radius);

      context.rotate(Math.PI/2 - angle);
      
      context.fillText(character, 0, 0);
      context.strokeText(character, 0, 0);

      angle -= angleDecrement;
      index++;

      context.restore();
   }
   context.restore();
}
   
// Initialization................................................

if (navigator.userAgent.indexOf('Opera') === -1)
   context.shadowColor = 'rgba(0, 0, 0, 0.4)';

context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 5;

context.textAlign = 'center';
context.textBaseline = 'middle';

drawGrid('lightgray', 10, 10);
drawCentroid();

drawCircularText("Clockwise around the circle", Math.PI*2, Math.PI/8);