Javascript 不使用加载事件的画布drawImage

作为对canvas及其工作方式的介绍，我想做一个小测验。只使用颜色，我没有任何用谷歌无法解决的问题

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

所以我这样做了：

我的主循环是一个函数上的事件绑定，click的工作方式如下：

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

然后，我的主循环将使用qcm对象中的值来知道要绘制什么。在任何情况下，我都会清除画布，然后将画布骨架缩回，此时只包含背景图片分配

这是我的clear 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;
    }
}

当我的画布结束初始阶段时，它将绘制我想要显示的框架、问题、答案、分数。。。取决于qcm状态

例如，以下是主循环函数的一部分：

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

其中my 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代码中无，然后在画布上绘制，但我真的不喜欢这个想法，因为我以后想尝试在数据库中获取图片，这将不允许这样做

所以我在看：

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

---

我没有发布整个代码，因为它有800行，但如果需要，我会发布：

只需在load回调中移动drawStartPanel函数，如下所示：

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

这样称呼：

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

进一步

---

另一种同步应用图形的方法是使用

你能在JSFIDLE或codepen上共享代码吗？出于好奇，qcm.canvas是HTMLCanvasElement，对吗？为什么使用scrollHeight和scrollWidth属性而不是宽度和高度属性？我只是了解到这些道具会返回奇怪的值，顺便说一句，`你的答案肯定有用！但是，每次我想画另一帧时，我都会使用InitCanvas。这意味着我不会总是使用相同的函数，有没有办法将函数作为参数传递，或者我必须编辑整个脚本？我会尽快发布整个代码的，我编辑了我的帖子，这样你就可以在背景绘制完成后传递你想要绘制的任何回调函数。我希望这有帮助！我将不得不编辑脚本的一部分以适应此模型，但这应该很好，我想，我将尝试给您一个反馈：因此我尝试应用第一点，但我最终在几点上受阻，这将使代码很难理解…我将看看承诺：/