Question

我写了一个函数，它将两个图像 textBG 和 strap 绘制到画布上。 TextBG是背景，而表带则是背景上的标志。

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

任何人都可以帮我确定一种方法，确保第一张图片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!
    }
}

我希望我能帮忙！ =）

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

1 个答案: