【问题标题】:Accessing the HTML5 Canvas's DrawingContext2D Save/Restore Stack?访问 HTML5 Canvas 的 DrawingContext2D 保存/恢复堆栈?
【发布时间】:2017-07-10 15:57:49
【问题描述】:

有没有办法在后台访问 HTML Canvas 元素的 DrawingContext2D saverestore 堆栈?

目的是save 一个基本状态,clip 它的一个区域,允许一些操作发生,这些操作可能适用于clipsaverestore 具有不确定的订单(即某些可能save 2-3 个状态到堆栈并且永远不会恢复它们,或者它可能会restore 多次并在返回父函数之前丢失原始save 状态,然后该父函数将尝试restore 一个状态它不再存在于堆栈中。)

我宁愿在没有围绕 DrawingContext2D 的包装类的情况下执行此操作,因为 JavaScript 在每次函数调用时都会变慢一些,并且呈现往往是时间敏感的。

如果能够限制被调用函数中可能调用的restore 数量,而不依赖被调用函数来维持该限制,那也很棒。

【问题讨论】:

    标签: html canvas html5-canvas drawingcontext


    【解决方案1】:

    有没有办法在后台访问 HTML Canvas 元素的 DrawingContext2D 保存和恢复堆栈?

    状态堆栈是内部的,不会以任何方式暴露。您可以通过将您自己的调用作为上下文 prototype 上的包装器来利用自己的保存/恢复调用(参见例如this answer,它显示了一种方法)并从那里跟踪计数 - 这不会' t 影响上下文的其余部分性能。当然,您仍然无法访问内部。不过会有一些注意事项,例如您如何区分呼叫来源以及您如何知道何时应允许或不允许呼叫(调用restore() 多于save() 顺便说一句。安全)。

    但是,如果可能的话,我会完全避免使用保存/恢复。大多数状态都可以通过仅跟踪或设置您实际需要的状态(包括转换)来“手动”跟踪(setTransform() 在这里非常方便)。

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

    【讨论】:

    • webkit said no because [A library] "无法在您指定的剪辑之外绘制。使用 resetClip(),该 JS 库可以在任何位置绘制哎呀它想要......comment #25这个可怜的家伙不知道canvas.width=canvas.width 邪恶库的伎俩,也没有告诉我们我们可能在做什么当我们只想重置剪辑区域而不是上下文的所有其他属性时,这是错误的 ...
    • @Kaiido resetClipChrome 中不存在,不确定其他浏览器。知道什么时候可以投入生产吗?
    • @K3N 谢谢,我没有考虑过屏幕外的canvas 元素,但这可能是要走的路。
    • @CoryG 我链接到的功能请求是在 2012 年提出的(当时 chrome 仍然使用 webkit),并且在 2014 年状态下降(此时 IIRC chrome 仍然在 webkit 中)。我在 mozilla 的 bugzilla 上找不到任何东西,但我想说没有人在任何实现上致力于它。您可以尝试为所有这些浏览器的团队制作新的 FR,但目前,不要指望它会在不久的将来实现。
    猜你喜欢
    • 1970-01-01
    • 2014-07-10
    • 2013-12-09
    • 2012-01-12
    • 2014-12-21
    • 1970-01-01
    • 2016-11-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多