javascript - Canvas 仅每隔一次点击更新一次

Question

我试图通过 JavaScript 将图像绘制到 Canvas 对象中，并在单击该图像时动态更改另一个图像的源。当我调用以下 JavaScript 图像时:

function clicked(i){    
switch(i){
    case(1): 
    source = document.getElementById("edit_pic").src = "images/1.png";  
    break;
    case(2) : 
    source = document.getElementById("edit_pic").src = "images/2.png";
    break;
    case(3) : 
    source = document.getElementById("edit_pic").src = "images/3.png";
    break;
    case(4) : 
    source = document.getElementById("edit_pic").src = "images/4.png";
    break;
    case(5) : 
    source = document.getElementById("edit_pic").src = "images/5.png";
    break;
    }
updateCanvas();
}


function updateCanvas(){
var c=document.getElementById("edit_canvas");
var ctx=c.getContext("2d");
img = document.getElementById("edit_pic");
ctx.drawImage(img,0,0);
}

每当单击 5 个图像之一时，“edit_pic”图像都会按预期更新，但是“edit_canvas”仅在您单击同一图像两次时才会绘制图片。任何帮助表示赞赏。

Answer 1

这可能是因为当您在单击的函数末尾执行 updateCanvas 函数时，图像仍在加载。您需要在图像上实现 onload 回调并从那里执行 updateCanvas 函数。换句话说......你需要对此进行异步:

function clicked(i){
   var img = document.getElementById('edit_pic');
   img.onload = function(){ updateCanvas(img); };
   img.src = 'images/'+ i +'.png';
} 

function updateCanvas(img){
   var c = document.getElementById("edit_canvas"),
       ctx = c.getContext("2d");

   ctx.drawImage(img,0,0);
}