收藏
回答

canvas画图画的越多越卡

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug canvas 客户端 Android 6.6.6 1.9.1

开始用画笔画图时不卡,画的多了开始卡。清除画布后继续画,还是卡,越来越卡。不知道是什么问题?


1.清除画布:

canvasContext.clearRect(0, 0, width, height);

canvasContext.draw();


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

7 个回答

  • 宋孝婷
    宋孝婷
    2019-10-10

    小程序canvas在画图时重复使用canvasContext.draw(true)后界面就会经常出现漏帧、卡顿等现象。我的解决办法:在重头绘制canvas时调canvasContext.draw(false)。但是如果一个一直需要保存绘图轨迹的canvas,怎么才能解决它调用canvasContext.draw(true)导致的卡顿问题呢?


    2019-10-10
    有用
    回复 4
    • 🐱
      🐱
      2019-10-10
      用新版canvas可以不卡, 但是迟迟不出正式版
      2019-10-10
      回复
    • 宋孝婷
      宋孝婷
      2019-10-10回复🐱
      怎么可以用到新版canvas?
      2019-10-10
      回复
    • 🐱
      🐱
      2019-10-11回复宋孝婷
      等基础库2.9吧, 现在的公测版感觉还不靠谱
      2019-10-11
      回复
    • Z开心
      Z开心
      2021-09-10
      新版的更是坑
      2021-09-10
      回复
  • 2018-06-20

    同遇到类似问题,关键我小程序没迭代,以前不卡现在卡.....这就很尴尬了

    2018-06-20
    有用
    回复
  • 已注销
    已注销
    2018-06-11

    卡顿的原因我遇到的有两个:1是一个页面用了多个canvas;2是算法不合理

    2018-06-11
    有用
    回复
  • 橘子小姐的胖橘子
    橘子小姐的胖橘子
    2018-05-09

    还有就是绘制的时候,将获取到的坐标点放进数组中,这样方便使用删除

    例:

    // 手指触摸动作开始

    canvasStart: function(e){

    const touchs = []

    let point = { x: e.changedTouches[0].x, y: e.changedTouches[0].y };

    touchs.push(point);

    },

    // 手指触摸动作移动

    canvasMove: function(event){

    const that = this;

    let point = { x: event.touches[0].x, y: event.touches[0].y };

    touchs.push(point);

    if (touchs.length >= 2) {

    that.draw(touchs)

    }

    },


    // 触摸动作结束

    canvasEnd: function (event){

    // 清空轨迹数组

    for (let i = 0; i < touchs.length; i++) {

    touchs.pop()

    }

    },


    //绘制

    draw: function (touchs) {

    let point1 = touchs[0]

    let point2 = touchs[1]

    touchs.shift()

    context.moveTo(point1.x, point1.y)

    context.lineTo(point2.x, point2.y)

    context.stroke()

    context.draw(true)

    }

    2018-05-09
    有用
    回复
  • 橘子小姐的胖橘子
    橘子小姐的胖橘子
    2018-05-09

    因为在你绘制的过程中,获取到的坐标点一直缓存在你的手机上,手机的内存是有限的,而这是非常的耗内存的。所以你在绘图的过程中需要把你用过的、不需要的坐标点清空删除

    2018-05-09
    有用
    回复 1
    • 春节快乐
      春节快乐
      2018-05-18
      我看了小程序性能数据,内存变化不大啊?
      2018-05-18
      1
      回复
  • L.Y.Q
    L.Y.Q
    2018-05-01

    遇到相同问题,在真机上画多了确实会非常卡。楼主解决了吗?

    2018-05-01
    有用
    回复 3
    • 春节快乐
      春节快乐
      2018-05-18
      没解决啊,发现画多了以后采样频率有变化好像
      2018-05-18
      回复
    • L.Y.Q
      L.Y.Q
      2018-05-18回复春节快乐
      社区首页,已知问题“canvas的drawImage性能变差,频繁调动会出现卡顿”。但感觉不只是drawImage的问题。真机测试过,画画过程中,用到drawImage的时候确实马上就卡。单纯的画画,多了在安卓机上卡顿很明显,苹果手机好点。PS:同样的功能,以前在webview上实现都不卡,搬到小程序,就卡到不能用。感觉小程序的canvas太差劲了。
      2018-05-18
      回复
    • 春节快乐
      春节快乐
      2018-05-29回复L.Y.Q

      你说的没错,最简单的绘画画多了也会有延迟,采样点变少的问题。

      2018-05-29
      回复
  • 春节快乐
    春节快乐
    2018-04-25

    画一段时间后,屏幕触碰事件采样点变少,变慢。此时画一个圆变成一个多边形。

    2018-04-25
    有用
    回复
登录 后发表内容