0

我在我的网站的 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 变量？

4

2 回答 2

0

我会改为使用 loadImages 内部的回调来调用 drawGameElements。这样 drawGameElements 只在 loadImages 完成后运行。听起来你已经用你的两个函数创建了一个竞争条件。

于 2012-12-12T15:23:03.313 回答
0

如果我在你的位置，我会在画布之外创建得分栏。将其位置设置为绝对，让它悬停在画布上方所需的位置。这样您就可以将其作为 HTML 元素访问，而无需担心重绘。

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

于 2012-12-12T15:26:07.313 回答