收藏
回答

小程序canvas,draw(true) 与 draw()的性能差异

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 7.0.3.1400 2.6.2

我在使用小程序canvas的过程中,发现了一个奇怪的现象, canvas的draw(true)与draw()有明显的性能差异,在多次调用draw(true)后,就出现了严重的掉帧,而draw()不会, 为什么会考虑使用 draw(true)来保留绘制的痕迹呢,是因为我的小程序有这个需求,我需要绘制出一条轨迹以呈现给用户, 为什么不考虑使用缓存路径点连线的方式来绘制呢,也是因为可能产生的数据量实在太大, 所以我在这里贴上我的绘制代码,请大师 解惑!

OutView.Draw = function (canvas_id, data) {

  context.save();

  context.beginPath();

  context.translate(data.canvasWidth/2,data.canvasHeight/2);

  context.setStrokeStyle(data.PathColor);

  context.setFillStyle(data.PathColor);

  context.setLineWidth(2);

  context.moveTo(LastXYZ.X,0-LastXYZ.Y);

  context.lineTo(data.X,0-data.Y)

  context.arc(data.X, 0-data.Y, 1, 0, 2 * Math.PI)

  context.closePath();

  context.stroke();

  context.restore();

  context.draw(data.RetainContrailState);  //关键在这行,用户可以选择看轨迹或者不看轨迹,性能差异明显

  LastXYZ = {

    X: data.X,

    Y: data.Y,

    Z: data.Z

  }

};

我在小程序中调用这段代码,是通过定时器, 约30毫秒每次

最后一次编辑于  2019-03-18
回答关注问题邀请回答
收藏

2 个回答

  • 那只叫禾一的兔子溜得太快了
    那只叫禾一的兔子溜得太快了
    2020-09-27

    如果担心一帧里画的东西太多耗时长产生卡顿,可以试着拆解到多帧里面试试看。

    2020-09-27
    有用
    回复
  • 🌞
    🌞
    2019-06-28

    实测,draw(true)久了之后会变卡变慢,这时候调用draw()可以恢复速度。但我这边需求不能调用draw(),还请官方尽量解决一下这个问题

    2019-06-28
    有用
    回复 1
    • 乔大奎
      乔大奎
      2020-09-21
      大佬,这个问题你们当时怎么处理的啊,我这边现在也遇到这个问题了
      2020-09-21
      回复
登录 后发表内容