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();
}