畫布元素無法繪製圖像

Question

我寫了幾行代碼來繪製圖像，但似乎繼續加載，我嘗試了一些使用基本實現的W3學校代碼，但工作正常。

這裏發生的事情是它看起來像卡在一些看不見的循環，無法繪製圖像。

<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

我用的console.log（更換您的文件撰寫（）），它工作正常：

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>

對於爲什麼document.write（）的原因畫布不顯示，請閱讀document.write() overwriting the document?

您可能會注意到由於而導致的第一次和連續運行之間的差異被您的瀏覽器緩存。緩存的圖像立即可用於setup()函數內的繪圖。

Answer 2

首先你不需要寫context.drawImage(img,192,192);兩次只寫image.onload()函數裏面。當您使用document.write("Done !");編寫任何內容時，它會將內容寫入此文檔（HTML）頁面並可能產生問題。而不是寫在<p>標籤上的信息，而不是在整個文件上。

這裏是爲您的代碼片段：

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>