1

キャンバスに複数の画像を描画したいのですが（背景、背景に別の画像、そしてその画像に再び別の画像が表示されます）、画像をロードする場合としない場合があります。動作しません。

if(somecondition)
{
    //background image is 70kb
    //image on background is 65kb

    img3.src = "Image  path"; //images is almost 2kb 
    img4.src = "Image  path"; //images is almost 2kb 
    img5.src = "Image  path"; //images is almost 2kb 
    img6.src = "Image  path"; //images is almost 2kb 
    setTimeout(function()
    {
        img3.onload = function() 
        {
          context.drawImage(img3, 272, 139, 172, 31);
        }
    },1000);
    console.log("Linesss2 > 4 "+lines2);
    bottomY = 290+((lines1-5)*10);
    middleHeight = bottomY - 170;




    setTimeout(function()
    {
        img4.onload = function() 
        {
          context.drawImage(img4, 272, 170, 172, middleHeight);  ///272
        }
        img6.onload = function() 
        {
          context.drawImage(img6, 272, bottomY, 172, 71);
        }
    },1000);

    }
    var metrics1 = context.measureText(canvasText1);
    var testWidth1 = metrics1.width;

    var metrics2 = context.measureText(canvasText2);
    var testWidth2 = metrics2.width;

    context.fillText(canvasText1, 169.5-(testWidth/2), y-20);
    context.fillText(canvasText2, 169.5-(testWidth/2), y-20);
    wrapTextForCanvas1(context, canvasText1, 50, 180);
    wrapTextForCanvas2(context, canvasText2, 260, 180);
}
4

1 に答える 1

2

したがって、任意のタイムアウトを実行したくない場合は、各画像が読み込まれたときに通知を受ける必要があります。そうすれば、それらを使用しようとする前に、それらがすべてロードされていることを確認できます。各画像の onload コールバックを設定して、カウンターをインクリメントするだけです。そのカウンターがロードする必要がある画像の数に達すると、それらはすべて完了し、使用を開始できます。

最近、これに関する別の質問に答えました。変更されたコードについては、こちらを参照してください: http://jsfiddle.net/enhzflep/RLP5Y/

または、質問自体についてはこちら:前の関数の画像は背景に描画されません (キャンバス)

于 2012-10-12T05:55:29.730 に答える