Canvas-Element nicht in der Lage, Bild zu zeichnen

Question

Ich schrieb ein paar Zeilen Code, um ein Bild zu zeichnen, aber scheint, wie es auflädt, versuchte ich einige W3 School-Code mit der grundlegenden Implementierung, aber das funktioniert gut.

Was hier passiert, ist, dass es in einer unsichtbaren Schleife steckt und nicht in der Lage ist, ein Bild zu zeichnen.

<script> 
var canvas=null; 
var context=null; 
setup=function(){ 
    canvas=document.getElementById("my_canvas"); 
    context=canvas.getContext('2d'); 
    canvas.width=1200; 
    canvas.height=720; 
    img=new Image(); 
    img.onload=onImageLoad; 
    img.src="http://imgge.bg.ac.rs/images/logo1.jpg"; 
    context.drawImage(img,192,192); 
    }; 
    onImageLoad=function(){ 
     document.write("done !!"); 
     context.drawImage(img,155,10); 
    }; 
setup(); 
</script> 

Answer 1

ersetzt ich Ihre document.write() mit einem console.log() und es funktioniert gut:

var canvas = null; 
 
var context = null; 
 

 
var setup = function() { 
 
    canvas = document.getElementById("my_canvas"); 
 
    context = canvas.getContext('2d'); 
 
    canvas.width = 1200; 
 
    canvas.height = 720; 
 
    img = new Image(); 
 
    img.onload = onImageLoad; 
 
    img.src = "http://imgge.bg.ac.rs/images/logo1.jpg"; 
 
    context.drawImage(img, 192, 192); 
 
}; 
 

 
onImageLoad = function() { 
 
    console.log("done !!"); 
 
    context.drawImage(img, 155, 10); 
 
}; 
 

 
setup();

<canvas id="my_canvas"></canvas>

Aus dem Grund, warum document.write() Ursachen die Leinwand wird nicht angezeigt, lesen Sie document.write() overwriting the document?

Sie können einen Unterschied zwischen den ersten und aufeinanderfolgenden Ausführungen aufgrundbemerkenwird von Ihrem Browser zwischengespeichert. Ein zwischengespeichertes Bild ist sofort zum Zeichnen innerhalb der setup()-Funktion verfügbar.

Answer 2

Zuerst müssen Sie nicht schreiben context.drawImage(img,192,192); zweimal nur innerhalb der image.onload() Funktion schreiben. Wenn Sie unter Verwendung von document.write("Done !"); etwas schreiben, wird der Inhalt auf dieser Dokumentseite (HTML) geschrieben und es können Probleme auftreten. Stattdessen schreiben Sie die Nachricht auf <p> Tag statt auf das gesamte Dokument.

hier ist ein Ausschnitt für Ihren Code:

var canvas=null; 
 
var context=null; 
 
setup=function(){ 
 
    canvas=document.getElementById("my_canvas"); 
 
    context=canvas.getContext('2d'); 
 
    canvas.width=1200; 
 
    canvas.height=720; 
 
    img=new Image(); 
 
    img.onload=onImageLoad; 
 
    img.src="http://imgge.bg.ac.rs/images/logo1.jpg"; 
 
    //context.drawImage(img,192,192); 
 
    }; 
 
    onImageLoad=function(){   
 
     context.drawImage(img,155,10); 
 
     document.getElementById("report").innerHTML="Done !"; 
 
    }; 
 
setup();

<canvas id="my_canvas"></canvas> 
 
<p id="report"></p>