畫布圖像更改通過更改src

Question

我嘗試通過更改image.src來更改圖像。 但它不起作用。當它在setInterval（）函數中使用時，它可以工作。我知道 我知道爲什麼（？）。

var imgE=new Image(); 
imgE.src="Ship.png"; 
window.onload=init; 

function init() { 
ctx=document.getElementById("can1").getContext("2d"); 
draw(); 
//setInterval(draw,100); 
butE=document.getElementsByTagName("button"); 
butE[0].onclick=change; 
butE[1].onclick=getback; 
} 

function draw() { 
    ctx.clearRect(0,0,800,500); 
    ctx.drawImage(imgE,100,100,100,100); 
} 
function change() { 
    imgE.src="Ship_d.png"; 
    draw(); 
} 
function getback() { 
    imgE.src="Ship.png"; 
    draw(); 
} 

我聽說過'使用前圖像預加載'。但我不完全清楚。 無論如何，下面的書面作品。那爲什麼他們不需要預加載呢？ （請原諒我無知）

var imgE=new Image(); 
imgE.src="Ship.png"; 
var imgdE=new Image(); 
imgdE.src="Ship_d.png"; 
window.onload=init; 

function init() { 
ctx=document.getElementById("can1").getContext("2d"); 
draw(1); 
butE=document.getElementsByTagName("button"); 
butE[0].onclick=change; 
butE[1].onclick=getback; 
} 

function draw(no) { 
ctx.clearRect(0,0,800,500); 
    if (no==1) { 
    ctx.drawImage(imgE,100,100,100,100); 
    } 
    else ctx.drawImage(imgdE,100,100,100,100); 
} 
function change() { 
draw(2); 
} 
function getback() { 

拉伸（1）; }

Answer 1

這很可能是因爲圖像沒有及時加載。

要麼預裝你使用它們，或者你需要使用

imgE.src = "Ship_d.png"; 
imgE.onload = draw;