HTML5 Canvas: Holen Sie sich das Ereignis, wenn das Zeichnen beendet ist

Ich zeichne ein Bild in ein canvas-element. Dann habe ich code das hängt davon ab, bis dieser Prozess abgeschlossen sein. Mein code sieht wie folgt aus:

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

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

myImg.src = "someImage.png";

So, jetzt würde ich gerne benachrichtigt werden, wenn drawImage ist getan. Ich habe die spec, aber ich konnte nicht finden, dass entweder ein Ereignis oder die Möglichkeit der übergabe einer callback-Funktion. Bisher habe ich nur setzen Sie ein Zeitlimit, aber das ist offensichtlich nicht sehr nachhaltig. Wie löst man dieses problem?

InformationsquelleAutor der Frage elHornair | 2012-06-26

  1. 15

    Wie fast alle Javascript-Funktionen, die drawImage ist synchroned.h. es werden nur einmal hat es tatsächlich getan, was es tun soll.

    Sagte, was es ist tun sollwie die meisten anderen DOM-Aufrufe, ist die queue-Listen von Dingen, die neu lackiert werden das nächste mal der browser wird in die event-Schleife.

    Gibt es keine Veranstaltung, die Sie kann insbesondere registrieren, um Ihnen sagen, Wann das ist, da zu der Zeit keine solche event-handler genannt werden könnte, das repaint wäre schon passiert.

    InformationsquelleAutor der Antwort Alnitak

  2. 4

    Jef Claes erklärt es ziemlich gut auf seiner website:

    Browser das laden von Bildern asynchron, während die Skripte sind bereits
    interpretiert und ausgeführt. Wenn das Bild nicht vollständig geladen die Leinwand
    schlägt fehl, um es darzustellen.

    Ist zum Glück nicht schwer zu lösen ist. Wir müssen nur warten, um zu beginnen
    Zeichnung, bis wir Sie erhalten einen Rückruf vom Bild, Benachrichtigung der be -
    abgeschlossen hat.

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

    InformationsquelleAutor der Antwort Elisha Mooring

  3. 3

    Haben Sie schon ein Ereignis, wenn das Bild geladen, und Sie tun eine Sache (ziehen). Warum nicht ein anderes, und rufen Sie die Funktion, die tun, was Sie wollen, getan, nachdem drawImage? Im wahrsten Sinne des Wortes:

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

    InformationsquelleAutor der Antwort Simon Sarris

Schreibe einen Kommentar