我正在尝试构建一个可以实时或逐帧更新 HTML Canvas 的基本渲染器。
例如，一旦绘制了一个像素，它就会立即更新到屏幕或等待收集一帧，然后更新(例如每秒 25 帧)
目前我的代码不会以任何方式发生这种情况，我不确定如何让它工作。
现在，只有在所有操作完成后 Canvas 才会绘制到屏幕上。
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 秒收集一次点，将其渲染为帧并重复？
最佳答案
您只需打破 for 循环的“同步性”，因为浏览器正在同一重绘中完成所有 drawPixel 调用。
相反，使用 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>关于javascript - 以非阻塞方式更新 HTML Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28870431/