Javascript 如何在html 5中转换和旋转图形而不影响其他图形？

当我尝试转换第一个图形并保持第二个图形固定时，第二个图形也会移动，因此我尝试将第二个图形固定在指定位置，并且仅在更改第一个转换函数的值时转换第一个图形

我的代码：-

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.translate（10,10）；
ctx.fillRect（70,40,44,30）；
ctx.fillRect（10,10,40,30）；

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.translate（10,10）；
ctx.fillRect（70,40,44,30）；
ctx旋转（20*Math.PI/180）；
ctx.fillRect（10,10,40,30）；

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.save（）；
ctx.translate（10,10）；
ctx.fillRect（70,40,44,30）；
ctx.restore（）；
ctx.fillRect（10,10,40,30）；