当前位置：文江博客话题详情

如何强制画布中的显示更新

发布于 2024-10-17 13:05:40 字数 117 浏览 1 评论 0原文

如果我快速连续地在画布上绘制很多内容，例如循环中的 context.fillRect ，浏览器似乎会等到循环完成后再显示任何绘图（可能通过双缓冲）

有没有办法强制浏览器在每次绘制操作后显式或隐式更新显示？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烛影斜 2024-10-24 13:05:40

这并不是因为双缓冲而看不到结果，而是因为 Web 浏览器中的 JavaScript 是单线程的。如果您在 JavaScript 中类似地创建一个循环，重复执行类似 myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px"; 的操作，您会发现没有任何明显变化在浏览器中 - 甚至需要很多秒 - 直到你的 JavaScript 完成执行。

要绘制更改并在屏幕上查看结果，您需要使用 setInterval 或 setTimeout 将控制权交还给浏览器，但要求在将来的某个时刻运行代码。

例如，每秒在画布上绘制一个新的随机、随机颜色的矩形 15 次：

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
setInterval(function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  var r=Math.random()*255, g=Math.random()*255, b=Math.random()*255;
  ctx.fillStyle = 'rgb('+r+','+g+','+b+')';
  var w=Math.random()*canvas.width,     h=Math.random()*canvas.height;
  var x=Math.random()*(canvas.width-w), y=Math.random()*(canvas.height-h);
  ctx.fillRect(x,y,w,h);
},1000/15);

It is not really because of any double-buffering that you don't see the results, but rather because JavaScript in the web browser is single-threaded. If you similarly create a single loop in JavaScript that repeatedly does something like myDiv.style.top = parseInt(myDiv.style.top) + 1 +"px"; you will see that nothing will visibly change in the browser—even over many seconds—until your JavaScript has finished executing.

To draw changes and see the results on the screen, you need to use setInterval or setTimeout to yield control back to the browser but ask to run code at some point in the future.

For example, to draw a new random, randomly-colored rectangle on the canvas 15 times a second:

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
setInterval(function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  var r=Math.random()*255, g=Math.random()*255, b=Math.random()*255;
  ctx.fillStyle = 'rgb('+r+','+g+','+b+')';
  var w=Math.random()*canvas.width,     h=Math.random()*canvas.height;
  var x=Math.random()*(canvas.width-w), y=Math.random()*(canvas.height-h);
  ctx.fillRect(x,y,w,h);
},1000/15);

回复收藏 0 原文