html5 Canvas 转换笛卡尔坐标系后 单独旋转图形和文字 解决倒置问题

旋转为笛卡尔坐标系代码来自https://www.cnblogs.com/heyang78/p/7591175.html

        ctx.save();
        ctx.translate(0,height);  //height 为画布高度
        ctx.rotate(getRad(180));
        ctx.scale(-1,1);  
        /**
        省略具体画图逻辑
        */
        ctx.restore（）

在画图中图形可以正常展示但是直接使用 fillText()绘制文字会导致文字反转

自己摸索了一个暂时能用的方法实现正常的文字绘制，如下：

/**
 * 该片段实现文字反转
 * @param {*} ctx 即context
 * @param {*} text 绘制文字
 * @param {*} x 笛卡尔坐标系转换之前可以正常显示的X坐标
 * @param {*} y 笛卡尔坐标系转换之前可以正常显示的Y坐标
 */
function rotateText(ctx,text,x,y){
    ctx.save();
    ctx.translate(x,y)
    ctx.rotate(getRad(180))
    ctx.scale(-1,1)
    ctx.fillText(text,0,0);
    ctx.restore();
}

只需要改动代码即可适配文字

有更好的方法欢迎各位大神来指点一下 ＜（＾－＾）＞