收藏
回答

canvas反复绘制后绘制的帧率变慢

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 iOS 6.6.7 2.1.1

onTapCanvas: function (event) {

console.log("onTapCanvas ", event);

let that = this

let canvasX = event.detail.x - event.currentTarget.offsetLeft

let canvasY = event.detail.y - event.currentTarget.offsetTop

let centerX = canvasX - size * 0.5

let centerY = canvasY - size * 0.5


let ctx = that.canvasContext

let path = "../../images/SH04-CO00.jpg"

ctx.drawImage(path, centerX, centerY, 64, 64)

ctx.draw(true, function () {

})

},


这样一段代码,手动在画布上进行单词点击绘制图片,进行这样的操作多次之后,每次绘制的帧率越来越慢,从刚开50fps一直降到20多,看到图片绘制到画布的反馈越来越慢。


注:ctx.draw中true参数是为了保留之前绘制的内容。


请问是什么原因造成这个效率下降的?


回答关注问题邀请回答
收藏

2 个回答

  • 小何同学
    小何同学
    2018-07-11

    我也遇到同样的问题了,画一会儿之后就会很卡,不知道是不是因为什么数据一直在增加导致的,有没有什么办法清空掉那些不必要的缓存或者是对这个canvas进行一下优化

    2018-07-11
    赞同
    回复 4
    • 胡文杰
      胡文杰
      2018-07-11

      你尝试用在绘制前用clearRect清空canvas, 有可能可以解决问题,但是画布会明显刷新一下

      2018-07-11
      回复
    • 小何同学
      小何同学
      2018-07-11回复胡文杰

      我把这个clearRect方法用在清空画布功能上的,清空了之后确实不卡了,但是我目前遇到的问题是,一直画下去,会很快就变卡,在想怎样解决长时间绘画会很卡的问题

      2018-07-11
      回复
    • 胡文杰
      胡文杰
      2018-07-11回复小何同学

      你这个画布是不是也是非最终画布,你把最终绘制的画布清空试试看

      2018-07-11
      回复
    • 小何同学
      小何同学
      2018-07-11回复胡文杰

      抱歉没太懂那个最终画布是什么意思...我技术比较菜...,我的页面里面就写了一个canvas组件id为:myCanvas,然后用this.context = wx.createCanvasContext('myCanvas')生成上下文


      2018-07-11
      回复
  • 胡文杰
    胡文杰
    2018-07-08

    将true改为false后帧率就没有这么慢了,求大大们解惑。

    2018-07-08
    赞同
    回复 1
    • 胡文杰
      胡文杰
      2018-07-11

      有遇到相同问题的吗?等待大神现身。

      2018-07-11
      回复
登录 后发表内容