Canvas在圆弧周围绘制文本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);