javascript - 不使用加载事件的 Canvas 绘制图像

Question

作为对 Canvas 及其工作方式的介绍，我想创建一个小测验。仅使用颜色，我没有任何使用谷歌无法解决的非常严重的问题。

现在我想在测验中显示一张背景图片，但更准确地说，我希望任何问题都有不同的图片作为背景。

所以我这样做了:

我的主循环是一个函数上的事件绑定(bind)，点击的工作方式如下:

qcm.canvas.addEventListener('click', function(evt) {
        main(qcm, evt);
    }, false);

然后，我的主循环将使用 qcm 对象中的值来知道要绘制什么。无论如何，我都会清除 Canvas ，然后拉回 Canvas 骨架(目前仅包含背景图片分配)。

这是我的清晰 Canvas 函数，仅使用clearRect。

function clearCanvas(qcm)
{
    //Suppression du contenu du canvas
    qcm.context.clearRect(0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight);
    // Rechargement du décor du canvas
    initCanvas(qcm);
}

应该绘制背景的 InitCanvas 函数是这个:

function initCanvas(qcm)
{
    //Background color
    //qcm.context.fillStyle = QcmConfiguration.Canvas_BackColor;
    //qcm.context.fillRect(0,0,qcm.canvas.scrollWidth, qcm.canvas.scrollHeight);
    if (qcm.backgroundImage != undefined)
    {
        var background = new Image();
        background.addEventListener('load', function()
        {
                qcm.context.drawImage(background, 0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight);
        }, false);
        background.src = qcm.backgroundImage;
    }
}

当我的 Canvas 结束“init”阶段时，它会绘制我想要显示的框架(问题、答案、得分...取决于 qcm 状态)。

例如，这是主循环函数的一部分:

clearCanvas(qcm);
log(QcmLogsType.Initialisation, "Chargement du start panel");
drawStartPanel(qcm);

我的drawStartPanel是一个只绘制“播放”按钮的函数:

function drawStartPanel(qcm)
{
    // Dessin du rectangle colorée pour le bouton play
    qcm.context.fillStyle = QcmConfiguration.Start_BackButtonColor;
    qcm.context.fillRect((qcm.canvas.scrollWidth / 2) - 25, (qcm.canvas.scrollHeight / 2) - 25, 50, 50);
    // Dessin du triangle "play"
    qcm.context.fillStyle = QcmConfiguration.Start_ForeButtonColor;
    qcm.context.beginPath();
    qcm.context.moveTo((qcm.canvas.scrollWidth / 2) - 10, (qcm.canvas.scrollHeight / 2) - 10);
    qcm.context.lineTo((qcm.canvas.scrollWidth / 2) - 10, (qcm.canvas.scrollHeight / 2) + 10);
    qcm.context.lineTo((qcm.canvas.scrollWidth / 2) + 12, qcm.canvas.scrollHeight / 2);
    qcm.context.closePath();
    qcm.context.fill();
}

但是当我执行代码时，我的开始按钮似乎位于图片“下方”，这意味着图片加载事件似乎在drawStartpanel函数之后执行，而调用之前...

这样我认为主要的选择是将图片放在html代码中为display:none，然后将其绘制在 Canvas 上，但我不太喜欢这个想法，因为我后来想尝试这样做它将在数据库中获取图片，但不允许执行类似的操作。

所以我在寻找:

手动强制加载事件的方法或者不使用加载事件来显示我的图片的方法

(我没有发布完整的代码，因为它有 800 行，但如果需要的话我会发布:))

Answer 1

只需将您的drawStartPanel函数移动到load回调中，如下所示:

function initCanvas(qcm, callback) {
    // Background color
    // qcm.context.fillStyle = QcmConfiguration.Canvas_BackColor;
    // qcm.context.fillRect(0,0,qcm.canvas.scrollWidth, qcm.canvas.scrollHeight);

    if (qcm.backgroundImage !== 'undefined') {
        var background = new window.Image();

        background.onload = function () {
            qcm.context.drawImage(background, 0, 0, qcm.canvas.scrollWidth, qcm.canvas.scrollHeight);
            // Here call the start button drawing function assuming it always takes the qcm object as an argument
            callback(qcm);
        }

        background.src = qcm.backgroundImage;
    }
}

这样调用它:

clearCanvas(qcm);
log(QcmLogsType.Initialisation, "Chargement du start panel");
initCanvas(qcm, drawStartPanel);

走得更远

同步应用绘图的另一种方法是使用 Javascript Promises