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

Question

我正在将图像绘制到画布元素.然后我有代码依赖于这个过程来完成.我的代码看起来像这样:

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 在他的网站上解释得非常好:

浏览器在脚本已被解释和执行时异步加载图像.如果图像未完全加载,则画布无法呈现它.

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

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