canvas 中的rotate原地旋转的简单实现方法

rotate 画布旋转

ctx.rotate(60 * Math.PI /180) (旋转60度的简单公式)

rotate 旋转是以画布的左上角（0，0）的位置开始的
所以会导致旋转后画出来的图形旋转后位置不是自己想要的！

如果想让黑色矩形原地旋转60度就需要用到 translate

    ctx.strokeStyle ='red'
    ctx.strokeRect(40,40,60,60)
    ctx.save() // 保存当前状态 也就是画布原点在（0，0）
    ctx.translate(100,100) // 移动画布原点到（100,100） 因为黑色矩形的位置是在（100,100)
    ctx.rotate(60 * Math.PI / 180) // 旋转60度
    ctx.strokeStyle = '#000'
    ctx.strokeRect(0,0,30,30) // 因为画布原点到了原黑色矩形的坐标（100,100）所以黑色矩形的x,y 就要设置成(0,0)
    ctx.restore() // 回到之前保存的画布状态 以便不影响下次绘画