用canvas 写时钟程序之绘制各个边沿的时间点

画完圆形之后，开始绘制在各个边沿的数值，

一，遇到连个canvas  文本对象属性measureText()，fillText()

1,  context.measureText(message):
 当我们提供一个文本message,调用此方法，
 它会依据当前context设置的字体、大小等，返回一个文本的度量信息对象TextMetrics；
 当前html5 canvas中TextMetrics对象，仅包含一个属性，就是width; 
        可以用来确定当前给定字符串文本的在当前环境下的宽度；
        例如：
var metrics = context.measureText(message);
var textWidth = metrics.width;

2,     fillText([text],[x],[y],[maxWidth]):
参数的意义：
text:要在canvas上要渲染的文本内容；
x,y:代表开始渲染的点的位置坐标；
maxWidth:代表最大宽度；
与之搭配的设置文本的颜色属性：fillStyle

二，函数如下

function drawNumberals(){
    var numerals = [1,2,3,4,5,6,7,8,9,10,11,12];
    angle = 0;
    var i = 0;
    numeralsWidth=0;
   numerals.forEach(function(numeral){
       angle = Math.PI/6 * (numeral-3);
       numeralsWidth = context.measureText(numeral).width;
       context.fillText(numeral,canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralsWidth/2,canvas.height/2+Math.sin(angle)*(HAND_RADIUS)+FONT_HEIGHT/3);
   });
}

这里
canvas.width/2+Math.cos(angle)*(HAND_RADIUS)-numeralsWidth/2是哪个时间数值的开始渲染点。

大致的推算思路可以通过图形不难推测出来，