Question

我正在向canvas元素绘制图像。然后我有代码依赖于这个过程来完成。我的代码如下所示：

var myContext = myCanvasElement.getContext('2d'),
    myImg = new Image();

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
};

myImg.src = "someImage.png";

现在，我想在drawImage完成时收到通知。我检查了规范，但我找不到事件或传递回调函数的可能性。到目前为止，我只是暂停了，但这显然不是很可持续。你是如何解决这个问题的？

Answer 1

与几乎所有Javascript函数一样，drawImage是同步，即只有在它实际完成它应该做的事情后才会返回。

那就是说，它应该做什么，就像大多数其他DOM调用一样，是下次浏览器进入事件循环时要重新绘制的事物的队列列表。

没有事件你可以专门注册告诉你什么时候，因为当任何这样的事件处理程序被调用时，重绘就已经发生了。

Answer 2

Jef Claes很好地解释了on his website：

浏览器在脚本已经存在的情况下异步加载图像   解释和执行。如果图像未完全加载画布   无法呈现它。

幸运的是，这并不难解决。我们只需要等待开始   绘图直到我们从图像收到回调，通知加载   已经完成了。

<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);        
    };            
}

Answer 3

图片加载时你已经有了一个事件，你做了一件事（绘图）。为什么不做另一个并调用在drawImage之后做你想做的任何事情的函数？字面意思是：

myImg.onload = function() {
    myContext.drawImage(containerImg, 0, 0, 300, 300);
    notify(); // guaranteed to be called after drawImage
};

HTML5 Canvas：绘图完成后获取事件

3 个答案: