以特定顺序在 HTML 画布上绘制两个图像

Question

我编写了一个函数，它可以在画布上绘制两个图像，textBG 和 strap。 TextBG 是背景，而 strap 是背景之上的标志。

然而，令人讨厌的是，这两个图像在画布上绘制的顺序似乎没有任何特定的顺序，因此背景通常会绘制在徽标的顶部。

谁能帮我确定一种方法来确保第一张图片 textBG 在表带图片之前加载，因此不会遮挡它？

Javascript

function addTextBg(){

    var colourInput = document.getElementById("bgColour").value;
    if(colourInput > 2){
        var colour = 'red';
    }else if(colourInput > 1){
        var colour = 'pink';
    }else if(colourInput > 0){
        var colour = 'blue';
    }else{
        var colour = 'white';
    }
    var opacity = document.getElementById("bgOpacity").value;
    var size = document.getElementById("bgSize").value;
    var alignment = document.getElementById("bgAlign").value;
    if(colourInput > 0){
        var strapColour = 'white';
    }else{
        var strapColour = 'black';
    }

    var textBg = new Image();
    textBg.src = 'images/text-bg/'+colour+'-'+opacity+'-'+size+'-'+alignment+'.png';
    textBg.onload = function(){
    context.drawImage(textBg, 0, 0);
    }

    var strap = new Image();
    strap.src = 'images/straps/strap-'+strapColour+'-'+alignment+'-'+size+'.png';
    strap.onload = function(){
        context.drawImage(strap, 0, 0);
    }}

Answer 1

试试这个：

var BGloaded=false;
var logoloaded=false;

textBG.onload=function()
{
    BGloaded=true;
    tryToDraw();
}

strap.onload=function()
{
    logoloaded=true;
    tryToDraw();
}

function tryToDraw()
{
    if (BGloaded && logoloaded)
    {
        context.drawImage(textBg, 0, 0); //draw it first
        context.drawImage(strap, 0, 0); //and then draw that!
    }
}

另一种选择：（由markE提出）

var loaded=0;

textBG.onload=function()
{
    loaded++; //does the same as loaded+=1
    tryToDraw();
}

strap.onload=function()
{
    loaded++;
    tryToDraw();
}

function tryToDraw()
{
    if (loaded==2) //the total amount of images
    {
        context.drawImage(textBg, 0, 0); //draw it first
        context.drawImage(strap, 0, 0); //and then draw that!
    }
}

希望我能帮上忙！ =)