访问HTML5 Canvas的DrawingContext2D保存/恢复堆栈?

时间:2017-02-21 06:40:37

标签: html5 canvas html5-canvas drawingcontext

有没有办法在引擎盖下访问HTML Canvas元素的DrawingContext2D saverestore堆栈?

目的是save基础状态,clip关闭某个区域,允许执行一些可能适用clipsave,{{}}的操作{1}}具有不确定的顺序(即某些内容可能restore 2-3指向堆栈并且永远不会恢复它们,或者它可能会多次save并在进入之前失去原始的restore状态回到父函数,然后尝试save堆栈中不再存在的状态。)

我更喜欢在没有围绕restore的包装类的情况下执行此操作,因为每次函数调用时JavaScript都会变慢,渲染往往是时间敏感的。

能够在不依赖被调用函数的情况下限制被调用函数中DrawingContext2D次调用的次数来维持该限制也是很好的。

1 个答案:

答案 0 :(得分:2)

  

有没有办法在引擎盖下访问HTML Canvas元素的DrawingContext2D保存和恢复堆栈?

状态堆栈是内部的,不以任何方式暴露。您可以通过在上下文 prototype 上提升您自己的调用作为包装器来进行保存/恢复调用(参见例如显示一种方法的this answer)并从那里继续计数跟踪 - 这不会影响其他环境的表现。当然,你仍然无法访问内部。但是会有一些注意事项,例如你如何区分呼叫源以及你如何知道何时应该允许呼叫(呼叫restore()超过save()是安全的。)

但是,如果可能的话,我会避免使用保存/恢复。大多数州都可以跟踪"手动"只跟踪或设置你真正需要的状态,包括转换(setTransform()在这里非常方便)。

主要障碍是使用剪辑时。目前无法在不使用保存/恢复(或设置上下文大小)的情况下重置剪辑 - standard includes it但目前似乎并未支持任何供应商。但是,在许多情况下,您可以使用合成来替换剪裁,有时会与屏幕外画布相结合。