Question

我创建了一个画布，我画了100个立方体，每个立方体都有不同的速度，位置和大小。它的运行方式和我想要的帧率一样。

但是当我切换到一个不同的程序时，我的笔记本电脑需要几秒钟才能调整，所以我几秒钟都无法使用任何程序，我想这可能是因为脚本和我拿了一个看看任务管理器我的GPU使用率高达40％

以下是代码：

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  c.setAttribute('width', w);
  c.setAttribute('height', h);

  var Ypos = [];
  var Xpos = [];
  var cubeWidth = [];
  var Yspeed = [];
  for (var i = 0; i < 100; i ++) cubeWidth[i] = getRandomInt(7, 10);
  for (var i = 0; i < 100; i ++) Yspeed[i] = getRandomInt(30, 90) / 10;
  for (var i = 0; i < 100; i ++) Ypos[i] = getRandomInt(0, c.height);
  for (var i = 0; i < 100; i ++) Xpos[i] = getRandomInt(0, c.width);

  setInterval( function() {
  ctx.clearRect(0, 0, c.width, c.height);

  for (var i = 0; i < 100; i ++) {
    Ypos[i] += Yspeed[i];

    if (Ypos[i] + cubeWidth[i] / 2 > h) {
    Ypos[i] = -cubeWidth[i] / 2;
    Xpos[i] = getRandomInt(0, c.width);
    }

    var width = 10;
    var height = 10;

    ctx.beginPath();
    ctx.moveTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
    ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
    ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
    ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
    ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
    ctx.stroke();
    ctx.closePath();
  }
  }, 1000/60);

  function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
  }

我该怎么做才能解决这个问题？

Answer 1

摆脱setInterval()，因为这肯定会导致问题，并且要求浏览器保持活动状态，即使操作系统正在尝试做其他事情。将绘图包装在自己的函数中，并在完成后使该函数调用，但使用requestAnimationFrame()使其仅在窗口处于活动状态时绘制...

function() draw {
    ctx.clearRect(0, 0, c.width, c.height);

    for (var i = 0; i < 100; i ++) {
        Ypos[i] += Yspeed[i];

        if (Ypos[i] + cubeWidth[i] / 2 > h) {
            Ypos[i] = -cubeWidth[i] / 2;
            Xpos[i] = getRandomInt(0, c.width);
        }

        var width = 10;
        var height = 10;

        ctx.beginPath();
        ctx.moveTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
        ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
        ctx.lineTo(cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
        ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], cubeWidth[i] / 2 + Ypos[i]);
        ctx.lineTo(-cubeWidth[i] / 2 + Xpos[i], -cubeWidth[i] / 2 + Ypos[i]);
        ctx.stroke();
        ctx.closePath();
    }

    setTimeout(function() {
        window.requestAnimationFrame(draw);
    }, 1000 / 60);
}

// start the animation
draw();

您可以在此处找到有关requestAnimationFrame()的更多信息......

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

绘制多个对象

1 个答案: