画布仅每隔单击一次即可更新

Canvas only updates every other click

本文关键字：一次 可更新 布仅每 单击      更新时间：2023-09-26

我正试图通过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"仅在您单击同一图像两次时绘制图片。感谢您的帮助。

这可能是因为在单击函数末尾执行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);
}
相关文章：