Canvas 如何平移、旋转和缩放矢量，使其显示在画布的中心？

我有一个路径，我想在画布上完全渲染。我知道路径上的初始宽度和高度，但我想旋转和缩放它

因此，我找到了确定新画布大小的方法，但这段代码并没有达到我想要的效果：

            let [w, h] = json.imgSize;
            ctx.translate(-w / 2, -h / 2);
            ctx.scale(json.scale, json.scale);
            ctx.rotate(json.rotation);
            [w, h] = [canvas.width, canvas.height];
            ctx.translate(w / 2, h / 2);

我希望结果是缩放和旋转的路径，但仍然在画布的中心。而是围绕路径的左上角旋转

我的理由是：

• 将路径中心移动到坐标0,0
• 围绕其中心缩放结果图像
• 围绕图像中心旋转图像
• 将生成的图像移动到画布中心

下面是我如何计算画布大小的：

        // rotate a rectangle and get the resulting extent
        let [x, y] = json.imgSize;
        let coords = [[-x, -y], [-x, y], [x, y], [x, -y]];
        let rect = new ol.geom.MultiPoint(coords);
        rect.rotate(json.rotation, [0, 0]);
        let extent = rect.getExtent();            
        [canvas.width, canvas.height] = [ol.extent.getWidth(extent), ol.extent.getHeight(extent)].map(v => v * 0.5);

---

如何在中央画布上旋转和缩放图形：

• 将画布[0,0]原点转换为中心画布
• 缩放画布
• 旋转画布
• 平移以向左和向上拉动img，使其中心为中心画布
• 绘制img（或路径图）
• 总是打扫卫生！将转换设置回其默认值

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//创建要旋转的矩形
var c=document.createElement（'canvas'）；
var cctx=c.getContext（'2d'）；
c、 宽度=100；
c、 高度=75；
cctx.fillStyle='skyblue'；
cctx.线宽=8；
cctx.fillRect（0,0，c.宽度，c.高度）；
cctx.冲程（0,0，c.宽度，c.高度）；
var量表=1；
var方向=1；
var角=0；
请求动画帧（动画）；
函数动画（时间）{
//画
ctx.clearRect（0,0，cw，ch）；
旋转缩放中心画布（c、比例、角度）；
//更新
刻度+=0.02*方向；
如果（scale3）{scale=3；direction=-1；}
角度+=数学PI/120；
//请求另一个动画循环
请求动画帧（动画）；
}
函数rotateScaleImgAtCenterCanvas（img、缩放、旋转）{
//将画布[0,0]原点设置为中心画布
ctx.translate（canvas.width/2，canvas.height/2）；
//缩放画布
比例尺（比例尺，比例尺）；
//旋转画布
ctx.旋转（旋转）；
//向左和向上拉动img，使其中心为中心画布
ctx.平移（-img.宽度/2，-img.高度/2）；
//绘制img
ctx.drawImage（img，0,0）；
//将转换设置回默认值
setTransform（1,0,0,1,0,0）；
}

body{背景色：白色；}
#画布{边框：1px纯红；}

---

这与我的想法完全相反。似乎所有的变换都是反向应用的。我很感谢你的帮助！