这是一个创建于 605 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在用 Fabric.js 做一些需求，读了一下文档和源码，发现他们正在使用一种缓存策略。
大概就是为每一个对象都创建一个 cacheCanvas DOM （在启用缓存的前提下），然后每次对于对象的操作都只会在这个 cacheCanvas DOM 里面生效，然后再通过 drawImage 画到真正的 canvas 里面。
不太明白的一点是，相对于直接将对象画到 canvas 里面，启用了缓存策略不是反而多了一步吗，就是先操作 cacheCavnas DOM ，完了然后还要 drawImage 到 canvas 。
为什么这两步操作反而比直接画在 canvas 上性能要更好？
求大佬们答疑，感谢。
 |
1
kamilic 2023-03-29 23:13:21 +08:00 via iPhone  1
离屏绘制？实时绘制的话要走浏览器的渲染流程呀，但是如果离屏就是纯粹数据层面的操作，我理解就是个缓冲之类的结构，可以等到真正需要绘制的时候才一次性计算和输出。
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#pre-render_similar_primitives_or_repeating_objects_on_an_offscreen_canvas |
 |
2
coldmonkeybit OP @kamilic 很有帮助，感谢
|
Select Language