在画布中以图像自身中心旋转图像

Question

我有一个奇怪的问题，当我通过文本角度值执行旋转时(我获取控制台打印的上一个角度并将其赋值给变量)，它能完美地工作。但是如果我像下面代码中那样传递一个变量，图像会被画得“更靠上和更靠左”(抱歉我的英语不好)。

function setImg(src,x,y,angle)
{
    var TO_RADIANS = Math.PI/180;
    var base_image = new Image();
    base_image.src = src
    base_image.onload = function () {
        console.log("-->->"+parseFloat(angle))
            ctx.save(); //saves the state of canvas
            ctx.translate(x+(base_image.width/2), y+(base_image.height/2)); //let's translate
            ctx.rotate(angle*TO_RADIANS); //increment the angle and rotate the image
            ctx.drawImage(base_image, -(base_image.width/2),-(base_image.height/2)); //draw the image ;)
            ctx.restore(); //restore the state of canvas
    };

}

谢谢！

- Taborlin El Grande

---

为什么不使用CSS来旋转图像？ - Mottie

base_image 是一个全局变量。如果没有涉及到该变量的声明和其他使用方式的代码，我们无法提供帮助，因为代码中没有其他问题。 - Blindman67

编辑：base_image是本地变量，但仍然执行相同的操作。 我不使用CSS，因为我需要在画布上绘制图像。 - Taborlin El Grande

那么唯一可能发生的事情就是你有另一个正在影响你正在创建的新变换的变换。函数 ctx.transform、ctx.rotate、ctx.scale 和 ctx.translate 通过乘以现有的变换来工作。尝试在 ctx.save 后使用 ctx.setTransform(1,0,0,1,0,0) 将变换重置为默认值，这将解决问题。 - Blindman67

Answer 1

ctx.transform、ctx.rotate、ctx.scale和ctx.translate函数的工作原理是创建一个新的矩阵，然后将现有变换与该新矩阵相乘。

这意味着使用这些函数的结果将取决于变换的当前状态。

为确保变换应用于默认（身份）矩阵，请使用函数ctx.setTransform(1, 0, 0, 1, 0, 0)重置变换矩阵，该函数将现有矩阵替换为新的默认矩阵。

如果在每组变换之前执行此操作，则无需使用保存和还原来保留当前变换状态。

- Blindman67