canvas(2)绘制路径，文本，坐标变换

canvas 绘制路径，文本，坐标变换

var drawing = document.getElementById('drawing');
  if(drawing.getContext){
    //获取绘图的上下文
    var context  = drawing.getContext('2d');

    //开始路径
    context.beginPath();
    //绘制外圆
    context.arc(100,100,99,0,2*Math.PI,false);

    //绘制内圆
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);

    //变化原点
    context.translate(100,100);

    //旋转指针
//    context.rotate(1);

    //绘制分针
    context.moveTo(0,0);
    context.lineTo(0,-85);

    //绘制时针
    context.moveTo(0,0);
    context.lineTo(-65,0);

    //绘制文本
    context.font = 'bold 16px Arial';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText('12',0,-85);

    //描边路径
    context.stroke();
  }