html5 – 如何在画布中强制显示更新

前端之家收集整理的这篇文章主要介绍了html5 – 如何在画布中强制显示更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我很快地连续绘制画布.一个context.fillRect在一个循环中,浏览器似乎等待直到循环完成之前任何绘图显示(可能通过双缓冲)

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

解决方法

这不是真的因为没有看到结果的任何双重缓冲,而是因为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,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);
原文链接:https://www.f2er.com/html5/168671.html

猜你在找的HTML5相关文章