Javascript 确保在发生错误时平衡画布保存/恢复

在HTML5/ECMAScript/JavaScript中执行图形时，一种非常常见的模式是执行context.save（），应用坐标变换，然后执行context.restore（）。不幸的是，HTML5的设计似乎将诸如转换之类的东西作为画布的一部分，即使图形上下文被丢弃并重新创建；如果坐标变换时发生错误，图形上下文将处于混乱状态“永远”

如果使用save/restore的每段代码都受到

try

块的保护，那么它可以确保上下文在退出时得到恢复。但是，如果使用

保存的任何代码段在不还原上下文的情况下抛出异常，则会导致调用上下文的任何还原操作还原不正确的状态

有没有干净的方法来做类似的事情：

var savedContext = contextCapturer.capture(context);
try
{
   ... code that might call a save without restore
}
finally
{      
  savedContext.restore();
}

我认为有可能让一个context saver对象修改context的save/restore方法，这样它们就可以保留一个计数，这样它就可以用来确保事情是平衡的，但是我不确定如何编写这样的代码，以便正确地工作，即使它调用或被其他类似的代码调用。一旦执行
还原
，保存的上下文就不必保持可用；必要的是，如果“try”块中的代码执行五次保存和三次还原，则
savedContext.restore（）
操作必须对上下文执行两次额外还原，以弥补不平衡

为了澄清这一点，我在考虑一些事情，比如这里的展示框架法；给定一个期望在
inRect
定义的范围内绘制的过程，该过程会变换坐标和剪辑，使其显示在
outRect
定义的范围内（在这种情况下还会绘制黄色边框）


函数showFramed（ctx、inRect、outRect、bColor、bWidth、proc）
{
ctx.save（）；
ctx.strokeStyle=b颜色；
ctx.线宽=宽度；
ctx.beginPath（）；
ctx.rect（outRect[0]，outRect[1]，outRect[2]，outRect[3]）；
ctx.stroke（）；
ctx.restore（）；
ctx.save（）；
ctx.clip（）；
ctx.translate（outRect[0]，outRect[1]）；
ctx.刻度（outRect[2]/inRect[2]，outRect[3]/inRect[3]）；
ctx.translate（-inRect[0]，-inRect[1]）；
proc（）；
ctx.restore（）；
}
功能显示屏（ctx）
{
var i；
ctx.beginPath（）；
对于（i=0；i