Canvas 的旋转函数是通过左上角旋转的，并且需要旋转已有内容需要旋转后重新绘制一遍。

本来只是想叫 AI 给个函数，调用下就好了，结果那货总是答非所问，没办法只能自己写写了。

虽然很简单，简单记录下吧。

如何实现

1. 将实际绘制的画布，和呈现的画布分成两个。 实际画布绘制内容，呈现画布用来做旋转等操作。
2. 通过 canvas 的 translate 函数，将画布移动到中心点，然后调用 rotate 旋转角度，最后回到起点即可。
3. 需注意在操作 canvas 的translate变化前，先使用save函数记录下 canvas 的原始矩阵，操作后通过restore还原之前的位置，这样避免数据变乱。

    let originCanvas;
    /**
     * 重绘画布 
     */
    function drawCanvas() {
        if (originCanvas == null) {
            originCanvas = document.createElement("canvas")
            if (originCanvas instanceof HTMLCanvasElement) {
                const ctx = originCanvas.getContext("2d")
                //渲染画布内容
                ctx.fillStyle = "#ff0000"
                ctx.fillRect(20, 20, 50, 30)
                ctx.fillStyle = "#00ff00"
                ctx.fillRect(20, 50, 20, 10)
            }
        }
        const canvas = document.getElementById("myCanvas")
        if (canvas instanceof HTMLCanvasElement) {
            const ctx = canvas.getContext("2d")
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(originCanvas, 0, 0)
        }
    }
        
        
    /**
     * 旋转画布
     */
   function rotateCanvas(rotate = 90) {
        const canvas = document.getElementById("myCanvas")
        if (canvas instanceof HTMLCanvasElement) {
            const ctx = canvas.getContext("2d", { willReadFrequently: true })

            ctx.save()
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.translate(canvas.width / 2, canvas.height / 2)
            ctx.rotate(Math.PI / 180 * rotate)
            ctx.translate(-canvas.width / 2, -canvas.height / 2)
            ctx.drawImage(originCanvas, 0, 0)
            ctx.restore()
        }
    }

～