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;

通过更改src更改画布图像

1 个答案: