Wie überlagern Sie Canvas dynamisch mit einem Canvas?

-1

Ich habe ein Canvas dynamisch geschrieben ohne zugewiesene ID. Wie kann ich Bild über JS auf der ersten Leinwand (von mehreren Leinwand) überlagern?Wie überlagern Sie Canvas dynamisch mit einem Canvas?

<canvas width="240" height="297"> 

<canvas id = "image_to_Overlay" width = "800" height = "500"></canvas>

Quelle

2017-08-29 Viru

Um die 1. Leinwand des DOM mit Normalpapier zu erhalten javascript Sie die gute alte Funktion document.getElementsByTagName() nutzen können. Dann mach was du willst damit.

Wahrscheinlich wäre es sicherer, sogar auf andere Attribute - wie Klassennamen - zu passen, nur um die falsche Leinwand zu bekommen (jquery Selektoren würde großartig funktionieren).

BTW sollte die folgende Arbeit

<html> 
    <head> 
    <script> 
     var image = new Image(); 
     image.onload = function(){//react on image download completed 
     //you can get the 1st canvas of the DOM accessing the array of canvas 
     var canvas = document.getElementsByTagName("canvas")[0]; 
     //then draw on it as needed 
     var context = canvas.getContext('2d'); 

     context.drawImage(image, 0, 0); 
     }; 
     //load image 
     image.src = "http://i.imgur.com/ITWfejd.png"; 
    </script> 
    </head> 
    <body> 
    <canvas width="240" height="297"></canvas> 

    <canvas id = "image_to_Overlay" width = "800" height = "500"></canvas> 
    </body> 
</html>

Quelle

2017-08-29 15:54:00

Danke. Ich sehe die Bildzeichnung nicht auf der Leinwand. var image = neues Bild(); image.src = "https://i.imgur.com/ITWfejd.png"; // Sie können die erste Zeichenfläche des DOM aufrufen, die auf das Array der Zeichenfläche zugreift var canvas = document.getElementsByTagName ("Zeichenfläche") [0]; // Zeichnen Sie dann bei Bedarf var context = canvas.getContext ('2d'); context.drawImage (Bild, 1000,1000); – Viru

Das liegt daran, dass 'image.src = '...' sofort zurückkehrt: Der Bild-Download ist asynchron. Wenn Sie es früh aufrufen, dann müssen Sie warten, bis das Bild verfügbar ist, d. H. Mit einem Ereignis-Listener, wie 'image.onload = ...' Es hängt wirklich von Ihrer Logik ab. Siehe https://stackoverflow.com/questions/2691301/async-or-sync-when-we-set-the-src-property-of-the-image-object –

Ich habe das Beispiel mit vollständigen HTML-Dokument erweitert und Onload-Funktion. Auch hier können Sie es je nach Bedarf an die gewünschte Position verschieben. Denken Sie daran, dass 1) das Bild src muss festgelegt werden, nachdem die Onload-Ereignis-Listener-Funktion angefügt wurde 2) die Leinwand sollte zu diesem Zeitpunkt verfügbar sein. –

Wie überlagern Sie Canvas dynamisch mit einem Canvas?

Antwort

Verwandte Themen