相关疑难解决方法(0)

看一下这个例子：

  var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");

    // First rectangle created    
    ctx.fillRect(20,20,150,100);

    // Second rectangle created    
    ctx.fillRect(20,150,150,100);

    // Third rectangle created    
    ctx.fillRect(20,300,150,100);

我在这里创建了三个矩形。创建第三个矩形后，我想旋转第一个矩形。我现在如何获取第一个矩形的参考？

我想保存在一个函数画布的状态DRAW1() ,它在另一个功能恢复DRAW2() .所以我写了下面的代码.但它不起作用.

<canvas id="canvas" style="width:500px; height:500px;" height="500" width="500"></canvas>
ctx = document.querySelector('#canvas').getContext('2d');
function draw1(){
   ctx.save();
   ctx.fillRect(25,25,100,100);
}
function draw2(){
   ctx.restore();
}
draw1();
draw2();

我想原因是状态保存在调用堆栈中.因此,在函数返回后,还会清除保存状态.

还有其他方式来实现我的需求吗？

UPD:背景是我想实现一个简单的动画,其中大部分都是静态的.我希望使用setInterval()来执行绘图函数draw().在draw()中,首先恢复画布并绘制剩余的动态部分.