如何在js中旋转某些东西或抵消旋转？

Question

我正在研究JS中的时钟脚本，当我将句柄设置为动画时我遇到了一个问题，因为我使用setInterval进行动画制作，每次旋转时，它不仅旋转了句柄，而且旋转了一切，因为setInterval重复一遍又一遍相同的代码，请帮忙！ 这是我的代码：

function clockEffect(){
var d = new Date();
var h = d.getHours();
var l =  0;
var lt =  -100;
setInterval(function(){
ctx.clearRect(0,0,400,400);
ctx.fillStyle="black";
ctx.fillRect(0,0,400,400);
ctx.strokeStyle="white";
ctx.fillStyle="white";
ctx.lineWidth="10";
ctx.strokeWidth
ctx.beginPath();
ctx.arc(200,200,200,200,0,360);
ctx.closePath();
ctx.stroke();
ctx.lineWidth="1";
ctx.font="60px Arial";
ctx.strokeText("12",168,60);
ctx.strokeText("3",340,210);
ctx.strokeText("9",30,210);
ctx.strokeText("6",184,360);

ctx.beginPath();
ctx.translate(200,200);
ctx.rotate(20*Math.PI/180);
ctx.moveTo(0,0);
ctx.lineTo(l,lt);
ctx.translate(-200,-200);
ctx.closePath();
ctx.stroke();
},40);
}
var called = clockEffect();