收藏
回答

canvas.drawImage 做动画,每30ms频繁调用该接口cpu发热严重怎么办?

求助~ 求助~ 求助~
// 目的是让小动物从右侧向左侧移动
const ctx = wx.createCanvasContext('canvasID');
function drawPic(){
  ctx.save();
  var picList = that.data.picList;
  //频繁调用 ctx.drawImage 。。。。
  for (var i = 0; i < picList.length;i++){
    if (picList[i].isStop != 1) {//目标没有被射中
      ctx.drawImage(
        picList[i].picName,
        picList[i].posleft,
        picList[i].postop,
        picList[i].width,
        picList[i].height
       )
    }
  }
  ctx.restore();
  ctx.draw();
}

/-----------分割线----------/
//调用方法
goAnimate();
var lastTime = 0;
function goAnimate() {
  var currTime = new Date().getTime();
  var timeToCall = Math.max(0, 30 - (currTime - lastTime));
  fishMaoTimeOut = setTimeout(function() {
    goAnimate();
  }, timeToCall);
  drawPic();
}

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

2 个回答

  • 灵芝
    灵芝
    2020-03-25

    你好,建议可以换成 canvas 2d 接口,结合 requestAnimationFrame使用。

    2020-03-25
    有用
    回复 1
    • 何崇
      何崇
      2020-03-25
      您好 ,有示例工程么?requestAnimationFrame is not a function
      2020-03-25
      回复
  • 何崇
    何崇
    2020-03-25

    各位游侠给个思路啊,换方式可以的啊😭

    2020-03-25
    有用
    回复
登录 后发表内容
问题标签