javascript - HTML5 Canvas - drawImage 并不总是绘制图像

Question

每次用户按下按钮时，我都会在 Canvas 上绘图，但有时图像不会绘制在 Canvas 上。我认为这可能是因为在 context.drawimage 函数运行之前没有及时加载图像，因为有时会绘制一些较小的文件。我已经使用了控制台并检查了资源，所以这是我能想到的唯一问题。

如何避免这个问题？

这是我的 Javascript 代码。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var questionbg = new Image();
var answerbg = new Image();

//this code is inside a function that is called each time a user presses a button
if(questiontype == "text"){
    questionbg.src = "./resources/textquestionbg.png";
    context.drawImage(questionbg, 0, 0);
    }
//if image question
else if(questiontype == "image"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//if audio question
else if(questiontype == "audio"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//else it is a video question
else{
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}

Answer 1

您应该检查图像是否已加载。如果没有，则监听加载事件。

questionbg.src = "./resources/imageaudiovideoquestionbg.png";
if (questionbg.complete) {
    context.drawImage(questionbg, 0, 0);
} else {
    questionbg.onload = function () {
        context.drawImage(questionbg, 0, 0);    
    };
}

---

MDN (Mozilla Doc，顺便说一句，很棒的来源)建议:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

显然，您不想应用描边或填充。但是，想法是一样的。