Question

作为画布及其工作方式的介绍，我想创造一个小小的quizz。仅使用颜色，我无法解决使用谷歌无法解决的任何问题。

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

所以我这样做了：

我的主循环是一个事件绑定函数，点击工作如下：

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

然后，我的主循环将使用qcm对象中的值来知道要绘制的内容。在任何情况下，我都会清除我的画布，然后画回画布骨架（目前仅包含背景图片分配）。

这是我的清晰画布功能，仅使用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;
    }
}

当我的画布结束＆＃34; init＆＃34;阶段，它绘制我想要显示的框架，（问题，答案，得分......取决于qcm状态）。

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

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

我的drawStartPanel是一个只绘制＆＃34; Play＆＃34;按钮：

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

但是当我执行我的代码时，我的开始按钮似乎是＆＃34;＆＃34;图片，这意味着图片加载事件似乎在drawStartpanel函数之后执行，而调用是在...之前...

这种方式我认为主要的选择是将图片显示为html代码中的display：none然后在画布上绘制，但我不是很喜欢这个想法，因为我后来想尝试做一些会在数据库上拍照的东西，这样就不会做那样的事了。

所以我在寻找：

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

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

Answer 1

只需在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);

更进一步

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

不使用加载事件

1 个答案: