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

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/

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

I want to show the alert after the canvas finished his rendering. But the alert show before the image is drawn.

如何等待 GUI 线程完成他的渲染?

How can I wait for the GUI thread to finish his rendering?

推荐答案

Canvas drawImage 是同步的.甚至，真正同步.

Canvas drawImage is synchronous. And even, really synchronous.

您的问题是 alert() 正在阻塞，甚至是真正阻塞.

Your problem is that alert() is blocking, and even really blocking.

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

By this I mean it does not only block the js execution, it also blocks the page rendering. So the browser has painted your image on your canvas, but didn't display it yet when you called alert().

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

One should always avoid alert and replace it with normal DOM elements.

Ps:这是一个证据，您的图像确实已经绘制在画布上.

Ps: Here is a proof that your image is indeed already painted on the canvas.