在畫布中按自己的中心旋轉圖像

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
    };

}

謝謝！

Answer 1

ctx.transform ， ctx.rotate ， ctx.scale和ctx.translate通過創建新矩陣，然后將現有轉換與該新矩陣相乘來工作。

這意味着使用這些功能的結果將根據轉換的當前狀態而變化。

為確保將轉換應用於默認（恆等）矩陣，請使用函數ctx.setTransform(1, 0, 0, 1, 0, 0) ）重置轉換矩陣，該函數將現有矩陣替換為新的默認矩陣。

如果在每組轉換之前執行此操作，則無需使用保存和還原來保持當前轉換狀態。