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

作为解决方法，您可以尝试这样做：

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

HTML5 Canvas: Get Event when drawing is finished

Answer 2

Canvas drawImage是同步的。甚至，really synchronous。

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

我的意思是它不仅会阻止js执行，还会阻止页面呈现。因此，浏览器在您的画布上绘制了您的图像，但在您调用alert()时尚未显示它。

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

Ps：Here is a proof你的图像确实已经画在画布上了。

Answer 3

双缓冲画布

屏幕画布上有两个像素缓冲区。一个称为后台缓冲区，所有渲染都直接完成后台缓冲区。当你进行渲染调用时，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内容都是如此。

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

3 个答案:

双缓冲画布