以非阻塞方式更新HTML画布

Update HTML Canvas In A Non Blocking Way

本文关键字：更新 HTML 画布 方式      更新时间：2023-09-26

我正在尝试构建一个基本的渲染器，它可以实时或逐帧更新HTML画布。

例如，一旦绘制了一个像素，它就会立即更新到屏幕上，或者等待收集一帧，然后更新（比如每秒25帧）

目前，我的代码根本不会出现这种情况，我也不确定如何让它发挥作用。

现在，只有在所有操作完成后，画布才会绘制到屏幕上。

Canvas.js:

$(document).ready(function(){
    main();
});
function main(){
    var c = document.getElementById('canvas');
    var ctx  = c.getContext("2d");
    for(var x=0; x<1000000; x++){
        drawPixel(ctx, "200", "200", "200", "255", randomNumber(0, 1000), randomNumber(0, 600));
    }
}
function drawPixel(context, red, green, blue, alpha, x, y){
    context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha/255) + ")";
    context.fillRect(x, y, 1, 1);
}
function randomNumber(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Test</title>
        <link rel="stylesheet" type="text/css" href="styles.css" media="screen"></style>
        <meta name="viewport" content="initial-scale=1">
    </head>
    <body>
        <div class="container">
            <canvas height="600" width="1000" id="canvas">
            </canvas>
        </div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="canvas.js"></script>
    </body>
</html>

我需要知道如何在需要时更新屏幕，而不是在代码完成后立即更新。

编辑：基本上，我想要的是所有的点逐渐出现，这样用户就可以看到点在积累。有没有一种方法可以让我每25秒收集一次点，将其渲染为一帧并重复？

当浏览器在同一个重新绘制中完成所有drawPixel调用时，您只需要打破for循环的"同步性"。

相反，使用requestAnimationFrame在浏览器的自然重新绘制间隔调用一次函数（而不是setTimeout或类似的）。类似于：

var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var counter = 0;
function run() {
  drawPixel(0, 0, 0, 255, randomNumber(0, canvas.width), randomNumber(0, canvas.height));
  counter++;
  // If our counter is less than 10000, run again at the next repaint
  if (counter < 10000) {
    window.requestAnimationFrame(run);
  }
}
function drawPixel(red, green, blue, alpha, x, y){
  context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha/255) + ")";
  context.fillRect(x, y, 1, 1);
}
function randomNumber(min, max){
  return Math.floor(Math.random()*(max-min+1)+min);
}
run();
<canvas height="100" width="100" id="canvas"></canvas>

requestAnimationFrame API可用于让浏览器决定何时重新绘制。您必须解决的问题是，您的JavaScript可能需要比帧之间的16毫秒左右更长的时间。

有多种方法可以处理此问题，但大多数方法都涉及批量执行绘制命令。这里有一个可能的解决方案：

// These variables would need to be outside the main function scope
var c = document.getElementById('canvas');
var ctx  = c.getContext("2d");
var batchSize = 1000;
var currentItem = 0;
var lastItem = 1000000;
// Execute a batch of draw commands
function main() {
  // Queue the next frame
  window.requestAnimatoinFrame(main);
  // Draw the pixels
  for(var batchEnd = currentItem + batchSize; currentItem < batchEnd; currentItem++) {
    drawPixel(ctx, ...);
  }
}
// Queue the first frame
window.requestAnimationFrame(main);

尝试在每次迭代中更新次数有限的间隔计时器，如：

$(document).ready(function(){
    main();
});
function main(){
    var c = document.getElementById('canvas');
    var ctx  = c.getContext("2d");
    var pixelsPerTick = 1000;
    // one thousand iterations each tick
    window.setInterval(function(){
      for(var x=0; x<pixelsPerTick; x++){
        drawPixel(ctx, "200", "200", "200", "255", randomNumber(0, 1000), randomNumber(0, 600));
      }
    }, 1000 / 25); // 25 times per second

}
function drawPixel(context, red, green, blue, alpha, x, y){
    context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + (alpha/255) + ")";
    context.fillRect(x, y, 1, 1);
}
function randomNumber(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
}
相关文章：