Javascript 调用setTransform后画布未旋转

我有一个HTML5画布，在其中我画了一条线，并围绕中心旋转。我想在每次绘制时重置画布的变换，然后重新平移/旋转画布，但它似乎没有旋转。我有一个工作示例，其中我存储了以前的旋转，并且只按角度差旋转（显然，在这个示例中，我没有重置转换），但是在未初始化的代码版本中，它没有提供足够的解决方法

我已经创建了两个小提琴，在其中我重置了变换，但它不能正常工作，在其中我存储了角度上的差异，它正常工作。下面复制的片段如何调整第二个版本，使其与第一个版本的功能相同？

第一版（功能性、非期望的实现）

（函数（）{
//动态画布
var dynamic=document.getElementById（“动态”）；
var dynamicCtx=dynamic.getContext（“2d”）；
//动画状态
var FPS=10；
var间隔=1000/FPS；
dynamicCtx.translate（dynamic.width/2，dynamic.width/2）；
var previousRotation_rad=0；
var旋转计数器_度=0；
var myDynamicObject={
中心：dynamic.width/2，
长度：动态宽度*0.4，
draw:function（）{//动态动画代码示例
dynamicCtx.clearRect（-this.center，-this.center，2*this.center，2*this.center）；
//绘制当前旋转角度
dynamicCtx.textBaseline='middle'；
dynamicCtx.textAlign=‘居中’；
dynamicCtx.fillText（旋转计数器_度+'°'，0，-此长度）；
//从中心向上画一条线
dynamicCtx.beginPath（）；
dynamicCtx.moveTo（0,0）；
dynamicCtx.lineTo（0，-this.length+20）；
dynamicCtx.stroke（）；
//旋转画布
var currentRotation_rad=旋转计数器_deg*Math.PI/180；
var rotationDifference_rad=当前旋转_rad-先前旋转_rad；
前一个旋转半径=当前旋转半径；
console.log（'旋转'，旋转差度'，弧度'）；
动态Tx.旋转（旋转差_rad）；
++旋转计数器_度；
}
};
函数drawDynamic（）{
myDynamicObject.draw（）；
//您可以添加更多动态对象并在此处绘制
}
函数animate（）{
setInterval（函数（）{
//只需要重新绘制动态对象
drawDynamic（）；
}，间隔）；
}
animate（）；//动画（动态）对象的入口点
})();
拉票{
位置：相对位置；
宽度：400px；
高度：400px；
}
#动态的{
位置：绝对位置；
左：0；
排名：0；
z指数：1；
}

如果您的浏览器不支持HTML5画布，则会显示此文本

绘制内容后，您正在旋转画布。先旋转，效果会很好。

在绘制内容后，您正在旋转画布。首先旋转，它工作正常。

与例如CSS不同，画布上下文呈现中间效果，因此在绘制任何内容之前必须应用所有变换

在绘制到画布和声明之前，只需向上移动旋转变换：

（函数（）{
//动态画布
var dynamic=document.getElementById（“动态”）；
var dynamicCtx=dynamic.getContext（“2d”）；
//动画状态
var FPS=10；
var间隔=1000/FPS；
var旋转计数器_度=0；
var myDynamicObject={
中心：dynamic.width/2，
长度：动态宽度*0.4，
draw:function（）{//动态动画代码示例
var currentRotation_rad=旋转计数器_deg*Math.PI/180；
dynamicCtx.setTransform（1,0,0,1,0,0）；
dynamicCtx.translate（dynamic.width/2，dynamic.width/2）；
dynamicCtx.clearRect（-this.center，-this.center，2*this.center，2*this.center）；
动态旋转（当前旋转角度）；
//绘制当前旋转角度
dynamicCtx.textBaseline='middle'；
dynamicCtx.textAlign=‘居中’；
dynamicCtx.fillText（旋转计数器_度+'°'，0，-此长度）；
//从中心向上画一条线
dynamicCtx.beginPath（）；
dynamicCtx.moveTo（0,0）；
dynamicCtx.lineTo（0，-this.length+20）；
dynamicCtx.stroke（）；
//旋转画布
console.log（'rotating'，currentRotation_rad'，radians'）；
++旋转计数器_度；
}
};
函数drawDynamic（）{
myDynamicObject.draw（）；
//您可以添加更多动态对象并在此处绘制
}
函数animate（）{
setInterval（函数（）{
//只需要重新绘制动态对象
drawDynamic（）；
}，间隔）；
}
animate（）；//动画（动态）对象的入口点
})();
拉票{
位置：相对位置；
宽度：400px；
高度：400px；
}
#动态的{
位置：绝对位置；
左：0；
排名：0；
z指数：1；
}

如果您的浏览器不支持HTML5画布，则会显示此文本

与例如CSS不同，画布上下文呈现中间内容，因此必须在绘制任何内容之前应用所有转换

在绘制到画布和声明之前，只需向上移动旋转变换：

（函数（）{
//动态画布
var dynamic=document.getElementById（“动态”）；
var dynamicCtx=dynamic.getContext（“2d”）；
//动画状态
var FPS=10；
var间隔=1000/FPS；
var旋转计数器_度=0；
var myDynamicObject={
中心：dynamic.width/2，
长度：动态宽度*0.4，
draw:function（）{//动态动画代码示例
var currentRotation_rad=旋转计数器_deg*Math.PI/180；
dynamicCtx.setTransform（1,0,0,1,0,0）；
dynamicCtx.translate（dynamic.width/2，dynamic.wi