canvas.drawImage 做动画,每30ms频繁调用该接口cpu发热严重怎么办?
发布于 7 年前 作者 zhouming 288 次浏览 来自 官方Issues
求助~ 求助~ 求助~
// 目的是让小动物从右侧向左侧移动
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 回复

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

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

回到顶部