Question

我的网站的index.html页面中有以下代码，当页面加载时，会将大量图像绘制到HTML5画布中：

window.onload = function(){



    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    loadImages(sources, drawImage);
};

Sources是我用来在JavaScript中保存图像的数组，这样一旦从HTML中的隐藏部分加载它们就可以将它们绘制到画布上。

此函数目前完全按预期工作 - 它调用loadImages函数，该函数将图像从HTML中的隐藏部分加载到JavaScript数组中，并调用每个函数的drawImage函数。数组中的图像。但我还有另一个函数，我想用window.onload调用：

我要添加到window.onload的函数是：

function drawGameElements(){
    /* Draw a line for the 'score bar'. */
    context.moveTo(0, 25);
    context.lineTo(1000, 25);
    context.stroke();

    /* Draw current level/ total levels on the left, and current score on the right. */
    context.font = "11pt Calibri"; /* Text font & size */
    context.strokeStyle = "black"; /* Font colour */
    context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
    context.strokeText(currentScore, 950, 15);
}

我尝试在loadImages(sources, drawImage);

中的window.onload = function(){};行下方添加对该函数的调用

所以我现在有：

window.onload = function(){
...
loadImages(sources, drawImage);
drawGameElements();
};

虽然这部分有用，但是它在画布顶部绘制了“得分栏”的线条，并为画布左侧的线条上方的等级写了“1/3”，某些原因，它没有在右侧绘制当前分数。

此外，只要我点击其中一个被绘制到画布上的图像，然后将其拖放到画布上，“得分栏”就会完全从画布中消失。

有谁知道这是为什么？无论画布上发生什么其他事情，我怎样才能让整个游戏期间的分数栏保持可见？另外，如何才能显示currentScore变量？

Answer 1

我会在loadImages内部使用回调来调用drawGameElements。这样drawGameElements仅在loadImages完成后运行。听起来你已经用你的两个功能创造了竞争条件。

Answer 2

如果我在哪里，我会在画布外面创建一个分数栏。将其位置设置为绝对位置，并将其悬停在所需位置的画布上方。这样您就可以将其作为HTML元素访问，而无需担心重绘。

将HTML元素用于这些显示的主要优点是您不需要重绘它们，例如在画布上移动图像之后。您也不必担心如何刷新值（在画布上，仅仅在旧的上绘制新值是不够的）。通过这种方式，您可以将值存储在HTML元素中并在画布上显示，因为知道得分将始终保持最佳状态。

使用JavaScript的window.onload属性调用多个函数

2 个答案: