V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX  ›  Vue.js

请问各位大佬, canvas 2d 模式下会出现闪屏怎么处理?

  •  
  •   qq309187341 · 2022-08-16 01:49:51 +08:00 · 1523 次点击
    这是一个创建于 590 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,使用 canvas 进行一个画布构建,目前的方式是画布中的内容改变就重现触发一次 this.ctx.clearRect(0, 0, width, height)方法,来清楚画布,之后再重现渲染需要的元素。但是这样会出一下一个闪屏问题。而我的需求里面还有针对画布中的某物体进行旋转,移动,缩放等操作。请问如何解决? 网上有人说双缓冲去处理,有点不太明白。我目前是在微信小程序中使用。

    4 条回复    2022-08-16 09:21:07 +08:00
    tyx1703
        1
    tyx1703  
       2022-08-16 08:45:17 +08:00 via iPhone
    关键词:离屏 canvas

    主要思路就是在内存中新建一张 canvas 画布,即离屏 canvas ,下一帧在离屏 canvas 中计算渲染,然后再将离屏 canvas 内容全部渲染到主 canvas 上面。
    gausszhou
        2
    gausszhou  
       2022-08-16 09:07:41 +08:00
    我看了一下,大致了解了。

    1. 闪屏 是因为不支持 raf
    2. 使用双缓冲,来解决 drawcall 的 帧生成时间超过显示屏的每帧间隔的问题
    3. 双缓冲的原理是:在另一个 canvas 上下文 ctx2 进行 drawcall ,等 ctx2 的 drawcall 完成后, ctx1 直接使用 drawImage(ctx2, width,height) 渲染 ctx2 的结果 。

    ps: drawcall 就是 js 代码中的一系列 canvas 绘图操作 对应在浏览器内部的绘制操作
    ps: 可以类比为 多个 document.createElement 和 一个 document.createFragmentElement
    ps: 借助这个问题顺带搞懂了 offscreenCanvas 的用法,如果还想要提升性能,我想可以使用 worker + offscreenCanvas
    gausszhou
        3
    gausszhou  
       2022-08-16 09:10:29 +08:00
    @gausszhou 勘误 drawImage(ctx2, width,height) ==> drawImage(canvas2, width, height)
    cheng6563
        4
    cheng6563  
       2022-08-16 09:21:07 +08:00
    双缓冲呗,自绘经典问题了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2700 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 15:35 · PVG 23:35 · LAX 08:35 · JFK 11:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.