Javascript HTML5 Canvas：绘制完成时获取事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11207606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas: Get Event when drawing is finished
提问by elHornair
I'm drawing an image to a canvas element. I then have code that depends on this process to be finished. My code looks like this:
我正在将图像绘制到画布元素。然后我有依赖于这个过程来完成的代码。我的代码如下所示：
var myContext = myCanvasElement.getContext('2d'),
myImg = new Image();
myImg.onload = function() {
myContext.drawImage(containerImg, 0, 0, 300, 300);
};
myImg.src = "someImage.png";
So now, I would like to be notified when drawImage is done. I checked the spec but I couldn't find either an event or the possibility to pass a callback function. So far I just set a timeout, but this obviously is not very sustainable. How do you solve this problem?
所以现在，我想在 drawImage 完成时收到通知。我检查了规范，但找不到事件或传递回调函数的可能性。到目前为止，我只是设置了一个超时，但这显然不是很可持续。你怎么解决这个问题？
采纳答案by Alnitak
Like almost all Javascript functions, drawImageis synchronous, i.e. it'll only return once it has actually done what it's supposed to do.
像几乎所有的 Javascript 函数一样，它drawImage是同步的，即它只会在它实际完成它应该做的事情后返回。
That said, what it's supposed to do, like most other DOM calls, is queue-up lists of things to be repainted next time the browser gets into the event loop.
也就是说，它应该做的，就像大多数其他 DOM 调用一样，是在浏览器进入事件循环时将要重新绘制的事物的队列列表。
There's no event you can specifically register to tell you when that is, since by the time any such event handler could be called, the repaint would have already happened.
没有您可以专门注册的事件来告诉您那是什么时候，因为当可以调用任何此类事件处理程序时，重绘已经发生了。
回答by Elisha Mooring
Jef Claes explains it pretty well on his website:
Jef Claes在他的网站上很好地解释了这一点：
Browsers load images asynchronously while scripts are already being interpreted and executed. If the image isn't fully loaded the canvas fails to render it.
Luckily this isn't hard to resolve. We just have to wait to start drawing until we receive a callback from the image, notifying loading has completed.
当脚本已经被解释和执行时，浏览器异步加载图像。如果图像未完全加载，则画布无法渲染它。
幸运的是，这并不难解决。我们只需要等待开始绘制，直到我们收到来自图像的回调，通知加载已完成。
<script type="text/javascript">
window.addEventListener("load", draw, true);
function draw(){
var img = new Image();
img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";
img.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
};
}
回答by Simon Sarris
You already have an event when the image loads, and you do one thing (draw). Why not do another and call the function that will do whatever it is you want done after drawImage? Literally just:
当图像加载时，您已经有一个事件，并且您做了一件事（绘制）。为什么不做另一个并调用可以做任何你想做的事的函数drawImage呢？字面意思只是：
myImg.onload = function() {
myContext.drawImage(containerImg, 0, 0, 300, 300);
notify(); // guaranteed to be called after drawImage
};
