我如何知道 HTML5 Canvas 的渲染何时完成？

Question

html：

<canvas id="cnv" width="786" height="1113">

js：

var img = new Image(),
    cnv = document.getElementById('cnv');

var context = cnv.getContext('2d');

img.onload = function () {

    context.drawImage(img, 0, 0, 786, 1113);
    alert('finished drawing');

}

img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png';

http://jsfiddle.net/FxrSa/14/

我想在画布完成渲染后显示警报。 但是在绘制图像之前会显示警报。

我怎样才能等待 GUI 线程完成他的渲染？

Answer 1

画布drawImage是同步的。 甚至， 真的是同步的。

你的问题是alert()正在阻塞，甚至真​​的阻塞。

我的意思是它不仅会阻止 js 执行，还会阻止页面渲染。 所以浏览器已经在你的画布上绘制了你的图像，但是当你调用alert()时还没有显示它。

人们应该始终避免使用alert并将其替换为普通的 DOM 元素。

Ps：这里证明您的图像确实已经绘制在画布上。

Answer 2

双缓冲画布

屏幕画布有两个像素缓冲区。 一种称为后台缓冲区，所有渲染都直接在后台缓冲区中完成。 当您进行渲染调用时， ctx.drawImage(foo,0,0); 在绘制后台缓冲区像素之前，该函数不会返回。 即使 GPU 正在执行渲染而 CPU 什么都不做，Javascript 也会等到渲染完成后再继续下一行。

当画布在屏幕上时，在当前执行完成之前，您将看不到任何渲染的结果。

function myRender(){
    ctx.draw(foo,0,0); // draw stuff  

    ... new pixel content is only in back buffer
    return;
}
function myLoop(){
    ctx.clearRect(,0,0,w,h);
    myRender();  // draw stuff
   .. new pixels not visible
}

myLoop(); 
// no more code

当myLoop函数返回且 javascript 无事可做时，DOM 将看到画布后台缓冲区已更改。 然后它将后台缓冲区移动到前台缓冲区，以便它可以被创建显示信号的硬件看到。

这称为双缓冲，它可以阻止在您绘制到屏幕时引起的诸如剪切和闪烁之类的伪像，并且屏幕在完成之前显示部分渲染。

当画布在屏幕外时，没有前端缓冲区。

对于所有 DOM 内容也是如此。

Answer 3

作为解决方法，您可以尝试以下操作：

//after the rendering
setTimeout(function(){
 alert("Yay");
 },100);

HTML5 Canvas：绘制完成时获取事件