HTML5 Canvas：绘制完成时获取事件 [英] HTML5 Canvas: Get Event when drawing is finished

问题描述

我正在将图像绘制到canvas元素。然后我有代码，这取决于这个过程要完成。我的代码如下所示：

  var myContext = myCanvasElement.getContext（'2d'），
 myImg = new Image （）; 
 
 myImg.onload = function（）{
 myContext.drawImage（containerImg，0，0，300，300）; 
}; 
 
 myImg.src =someImage.png; 
  

现在，我想在drawImage完成时收到通知。我检查规范，但我找不到一个事件或传递一个回调函数的可能性。到目前为止我只是设置了一个超时，但这显然是不可持续的。

解决方案

像几乎所有的Javascript函数一样， drawImage 是同步

。

也就是说，只有在实际执行后才会返回。

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?

解决方案

Like almost all Javascript functions, drawImage is synchronous.

That is, it'll only return once it has actually done what it's supposed to do.

这篇关于HTML5 Canvas：绘制完成时获取事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！