我如何知道HTML5 Canvas的渲染何时完成？ [英] How do I know when HTML5 Canvas' Rendering is Finished?

问题描述

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 blocks the js execution, it also blocks the page rendering. So the browser has painted your image on your canvas, but didn't displayed 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.

这篇关于我如何知道HTML5 Canvas的渲染何时完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！