用html5的canvas画时钟的问题

Question

问题1； //初始化画布
context.save();
context.clearRect(0,0,canvas.width,canvas.height);

context.translate(canvas.width/2,canvas.height/2);

context.scale(0.9,0.9);
context.rotate(-Math.PI/2);
context.save();

        初始化的时候加一句  context.rotate(-Math.PI/2)是什么意思？

问题2；
//分钟刻度
context.lineWidth=2;
context.beginPath();
for(var i=0;i<60;i++){
if(i%5!=0){
context.moveTo(radius-15,0);
context.lineTo(radius-10,0);
}
context.rotate(Math.PI/30);
}
context.stroke();
context.restore();
context.save();
画分钟刻度的原理是什么，moveTo和lineTo后面的y坐标为什么显示为0？

Answer 1

 context.rotate(-Math.PI/2);//只是为了调整坐标系看着方便些，就是把x轴朝上，y轴朝右。如果不转，就是计算角度费劲些，其他没什么影响，就是画分针，时针，秒针的时候按照对应角度计算就行了

 看context.rotate(Math.PI/30);下面有个坐标轴旋转的，也就是y轴对于每次划的分钟刻度线来说，位置都是垂直往上，没变过，也就是沿着x轴的。所以y轴坐标一直是0