时间戳

首页 > 解决方案 > JS脚本的执行速度真的很慢......需要快一吨

javascript - JS脚本的执行速度真的很慢......需要快一吨

问题描述

我正在使用 HTML 画布作为我的屏幕，使用 javascript 创建和操作系统。到目前为止，这是我的代码：

var Canvas = document.createElement('Canvas');
Canvas.width = window.innerWidth - 20;
Canvas.height = window.innerHeight - 20;
Canvas.border = '0px'
document.body.appendChild(Canvas);
var Ctx = Canvas.getContext('2d');
var PixelIndex = 'Not definded yet. D:'
var Render = 0;
function ClearCanvas() {
  Ctx.fillStyle = 'black';
  Ctx.fillRect(0, 0, Canvas.width, Canvas.height);
}
function RenderCycle() {
  ClearCanvas();
  GeneratePixelIndex();
  Render++;
  setPixel(Render, 100, 'red');
  RenderPixels(); //-------------------------> Has to be the last thing in the function...
}
function GeneratePixelIndex() {
  PixelIndex = new Array();
  for (var i = 0; i < Canvas.width; i++) {
    PixelIndex.push([])
    for (var j = 0; j < Canvas.height; j++) {
      PixelIndex[i].push('rgb(0, 0, 0)');
    }
  }
}
function setPixel(x, y, value) {
  PixelIndex[x][y] = value;
}
function RenderPixels() {
  for (var x = 0; x < Canvas.width; x++) {
    for (var y = 0; y < Canvas.height; y++) {
      Ctx.fillStyle = PixelIndex[x][y]
      Ctx.fillRect(x, y, 1, 1);
    }
  }
  requestAnimationFrame(RenderCycle);
}
document.onload = RenderCycle();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta version="1.0">
    <meta author="Evan Bair">
    <title>Maroon JS</title>
  </head>
  <body>
    <script src = './app.js'></script>
  </body>
</html>

假设单个红色像素飞过屏幕；它移动得非常慢。我可以加快速度，还是编辑我的代码以减少延迟？我认为RenderPixels()我的代码中的函数是罪魁祸首。谢谢。

标签： javascriptfunctionoperating-systemhtml5-canvaslag

解决方案

推荐阅读