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

我写了一个函数，它在画布上绘制两个图像，textBG和strip。TextBG是背景，而strap是背景上方的徽标

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

有谁能帮我确定一种方法，确保第一个图像textBG在strap图像之前加载，因此不会模糊它

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

试试这个：

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 bgload

和

var logoadded

，您可以降低解决方案的“变量依赖性”。F.ex:

var counter=2

，因为您要预加载2个图像。然后在

tryToDraw

中

if（--counter>0）{return；}

编辑：添加您的想法！=）

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!
    }
}