0

我正在为画布制作一个多项选择测验游戏，用户可以在其中上传自己的图像以获得多项选择答案。

When the next question is selected, the variables for the next question are got from a javascript array, including filepath for the image.

我遇到的问题是，通常在第一次测验尝试时，图像有时不会及时加载以在画布上绘制。我正在尝试通过确保始终绘制图像答案来提高测验画布方面的性能。

帮助将不胜感激。在画布上绘制图像的代码如下。

//else if answer type is image answer
    else if(answertype == "image"){
        answerbg.src = "./resources/imageaudiovideoanswerbg.png";
        eventstate = 'imageaget';
        if (answerbg.complete) {
        context.drawImage(answerbg, 0, 280);
            context.drawImage(imagefilea,75,285);
            context.drawImage(imagefileb,375,285);
            context.drawImage(imagefilec,75,591);
            context.drawImage(imagefiled,375,591);
        } 
        else {
               answerbg.onload = function () {
               context.drawImage(answerbg, 0, 280);  
               context.drawImage(imagefilea,75,285);
               context.drawImage(imagefileb,375,285);
               context.drawImage(imagefilec,75,591);
               context.drawImage(imagefiled,375,591);
                };
            }
        }
4

2 回答 2

2

您必须确保图像已加载，然后才能在画布上绘制。

所以你需要做的是这样的：

var image = new Image(); //make a new image object
image.onload = function() { //when the image has loaded...
doStuffWithImage(); //Do somthing with it (draw it on canvas etc.)
}
image.src = '/your/path/image.png'; //set the source (afterwards!)

如果您使用图像和画布，这是您必须知道的。

此外，如果您在加载所有图像时遇到问题，请创建一个preLoadAllImagesfromSource(sourceArray)函数，在执行主代码时，所有图像对象都已预先加载。

希望有帮助。

于 2013-04-06T12:12:21.757 回答
0

或者，您可以考虑在 JavaScript 或 HTML 本身中使用 BASE64 编码嵌入图像和/或其他资源。

http://ejohn.org/blog/embedding-and-encoding-in-javascript/

当然，在您的情况下，由于它是用户上传的内容，您可能必须从上传的图像生成 JavaScript。

于 2014-05-30T11:06:08.220 回答