在画布中旋转图像，导致图像拉伸（变宽和变小）

Question

我正在遇到一个奇怪的问题，同时执行图像的简单旋转。 在画布的中心周围旋转图像时，图像在旋转到90°时被拉伸到其原始宽度的两倍，并且调整到正常宽度/高度旋转到180°然后再拉伸到270°并在调整时调整大小再次旋转到0°。 此外，似乎图像在这些90°步骤之间是平行四边形而不是矩形。

我实际做的是：

var TO_RADIANS = Math.PI/180;
function drawRotatedImage(x, y, angle, width, height) {

    contextL.save();
    contextL.translate(x + width/2, y + height/2);
    contextL.rotate(angle * TO_RADIANS);

    var imgT = new Image();
    imgT.src = myPath;

    contextL.drawImage(imgT, -width/2, -height/2, width, height);

    contextL.restore();
}

ContextL的创建方式如下：

canvasL = document.getElementById("canvasL");

contextL = canvasL.getContext("2d");

我真的不明白，我的错是什么。我已经阅读了几乎所有关于在画布中旋转的线程，并且所有线程完全相同，但它正在工作。只有特殊情况可能是，我使用的是drawImage(image, x, y, width, height)而不是drawImage(image, x, y)，但是这会造成麻烦吗？

*导致drawImage(image, x, y)同样的问题 *使用contextL.drawImage(imgT, -width/2, -height/2, width/2, height*2);可以改变效果。开始拉伸和常规尺寸为90°，因此当旋转到90°时，它实际上是宽度的一倍和高度的一半。

*宽度和高度计算如下：

this.prepareIMG = function(){
    this.widthIMG = this.img.width * this.scale;
    this.heightIMG = this.img.height * this.scale;
};

这是我每次拨打drawRotatedImage(...)之前调用的函数。 this.scale是0.1到x的值，以0.1为步长增加/减少。  此外，当我在轮换期间将width和height记录到控制台时，值始终保持不变！ 我没有操纵函数contextL之外某处的drawRotatedImage(...)！

这是调用rotate-function

的代码

    this.rotatePlus = function(){
    refreshCanvas();
    this.rotation += 5;
    this.prepareIMG();
    drawRotatedImage(contextL, this.transX, this.transY, this.rotation, this.widthIMG, this.heightIMG/2);
};

最后refreshCanvas()定义如下

function refreshCanvas(){
contextL = canvasL.getContext("2d");
contextL.clearRect(0, 0, canvasL.width, canvasL.height);}

我的画布在HTML中声明，如<div id="divCanvasL"><canvas id="canvasL"></canvas></div>宽度＆amp;高度由css设定。