Question

我正在尝试通过JavaScript将图像绘制到画布对象中，并在单击该图像时动态更改其他图像的源。当我调用以下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);
}

Canvas仅更新每次其他点击

1 个答案: