画秒针的时候moveTo和rotate顺序不同应该没影响吧 可是如下面内容

ctx.save();
ctx.beginPath();
ctx.fillStyle="red";

var rad = 2 * Math.PI / 60 *second;
ctx.rotate(rad);
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r / 2 -30);
ctx.lineTo(-1,-r / 2 -30);
// ctx.rotate(rad);

ctx.fill();

ctx.restore();

rotate必须写在moveTo前面才会有旋转效果、注释掉的那一行rotate写在moveTo后面则没发生旋转、指向12点方向。这到底是为什么呢 求解答、感激不尽！