HTML5 画布 - drawImage 并不总是绘制图像

2022-01-17 00:00:00 javascript html5-canvas drawimage

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

I am drawing on the canvas each time a user presses a button, however sometimes the image is not getting drawn on the canvas. I think this could be that the image isn't loaded in time before the context.drawimage function runs, as some of the smaller files sometimes get drawn. I've used the console and checked resources and so this is the only problem I can think of.

如何避免这个问题?

这是我的 Javascript 代码.

This is my Javascript code.

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);
}

推荐答案

你应该检查图像是否加载.如果没有，则监听 load 事件.

You should check if the image is loaded. If not then listen to the load event.

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，顺便说一句很好的来源)建议:

MDN (Mozilla Doc, great source btw) suggests:

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';
}

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

Obviously, you are not wanting to apply the stroke or fill. However, the idea is the same.

相关文章