收藏
回答

canvas性能问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 6.7.3 2.3.0 [177]

真机运行项目时(双端都是),随着时间的递增运行越来越卡,但是PC端就不会那么明显,哪里写错了吗?


最后一次编辑于  2018-10-22  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

4 个回答

  • 阿喀牛斯
    阿喀牛斯
    2018-12-03

    之前也碰到canvas绘制久了就越来越卡顿的问题,这个应该是微信原生canvas的bug,使用webview来处理的话,跑多久都不会变慢。


    你使用下面这个代码来清除画布,可以把速度还原,但如果绘制久了,还是一样会再次变慢。

    wx.drawCanvas({

            canvasId: 'canvasId',

            actions: [],

            reserve: false

          })


    2018-12-03
    赞同
    回复 1
    • 旅途。👣👣
      旅途。👣👣
      2018-12-03

      好的  谢谢你的回答 有时间我去试试

      2018-12-03
      回复
  • 胡冰
    胡冰
    2018-10-23

    获取数据你可以开个worker线程,应该是不存在运行时间越久越卡顿这种情况的

    2018-10-23
    赞同
    回复 2
    • 旅途。👣👣
      旅途。👣👣
      2018-10-30

      另开线程里面不能用wx的api吧,这个线程到底有什么用 我还是没有想明白

      2018-10-30
      回复
    • 胡冰
      胡冰
      2018-11-02

      worker线程专门用来发起请求,和主线程交换数据,调用canvas api的肯定是主线程

      2018-11-02
      回复
  • 凤鸣👻
    凤鸣👻
    2018-10-23

    https://developers.weixin.qq.com/s/Krp10nmn7H3k主要优化两点 1. 使用 requestAnimationFrame 进行帧绘制,能保证在绘制耗时比较大的情况下自动降帧而不丢帧。即使是使用 setTimeout 也尽量不要使用 setInterval,setInterval 会在计时器触发时直接执行,而这时上一帧的绘制过程可能因为某些原因还未完毕。

    2. storke, clear, draw 的过程尽量在每一帧绘制时一次性执行。

    2018-10-23
    赞同
    回复 5
    • 旅途。👣👣
      旅途。👣👣
      2018-10-23

      谢谢,我试试

      2018-10-23
      回复
    • 凤鸣👻
      凤鸣👻
      2018-10-23

      还有就是,这段代码的意义我没明白
      直接这样,效率还会更高

      2018-10-23
      回复
    • 凤鸣👻
      凤鸣👻
      2018-10-23

      核心就是,单帧内减少 Canvas API 调用次数

      2018-10-23
      回复
    • 胡冰
      胡冰
      2018-10-23

      requestAnimationFrame只有小游戏的canvasAPI才有吧?

      2018-10-23
      回复
    • 旅途。👣👣
      旅途。👣👣
      2018-10-24回复凤鸣👻

      那段代码是绘制8个点

      2018-10-24
      回复
  • 卢霄霄
    卢霄霄
    2018-10-22

    哇 这示波器效果~

    你12条线路是单独画的,每条线路会有单独的定时器,但是事件处理队列是同一个,也就是相当于是系统有3ms来完成一截图的绘制。。手机上性能远不如PC(龙芯机器除外)。。如果每条线的进度可以是一样的,能不能试试用一个定时器来做,每次画这一竖条下来


    2018-10-22
    赞同
    回复 14
    • 旅途。👣👣
      旅途。👣👣
      2018-10-22

      用一个定时器绘制一条线也会卡

      2018-10-22
      回复
    • 卢霄霄
      卢霄霄
      2018-10-22回复旅途。👣👣

      在你的真实情况里,这个些数据是一开始就有一个时间段的,还是实时获取的呢?

      2018-10-22
      回复
    • 旅途。👣👣
      旅途。👣👣
      2018-10-22回复卢霄霄

      项目里面是根据蓝牙设备返回来的数据实时显示波形的,但是现在来看  获取数据就已经很耗费性能了  到时候在绘制这个动画  我感觉可能会卡蹦程序  现在在考虑如何优化

      2018-10-22
      回复
    • 卢霄霄
      卢霄霄
      2018-10-22回复旅途。👣👣

      能不能用俩canvas

      一个把源数据画线,做成临时文件的图。。这个canvas通过绝对定位隐藏起来。。

      一个把生成的图拿来移动显示

      2018-10-22
      回复
    • 旅途。👣👣
      旅途。👣👣
      2018-10-22回复卢霄霄

      现在不是移动的问题 我感觉像是canvas绘制的太久  就会变卡

      2018-10-22
      回复
    查看更多(9)