4

テキストといくつかの画像を表示するためにjavascript関数を使用しているキャンバスがあります。私が直面している問題は、クリックが機能を実行してテキストを表示するが、常に画像を配置するとは限らないことです。もう一度クリックすると、画像が表示されます。この動作は、すべてのブラウザーで一貫しています。コマンドは遅くはありません。最初は画像の表示に失敗するだけです。ティア

// JavaScript Document

    function manualsTxt() {
        var theCanvas = document.getElementById('Canvas1');
        if (theCanvas && theCanvas.getContext) {
            var ctx = theCanvas.getContext("2d");

            if (ctx) {
                var img1 = new Image();
                var img2 = new Image();
                var img3 = new Image();
                img1.src = "images/InRoads2004.png";
                img2.src = "images/XMUp.png";
                img3.src = "images/XM.png";

                //clear canvas
                ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

                // .drawImage (src, posX, posY);
                ctx.drawImage (img1, 50, 325);
                ctx.drawImage (img2, 250, 325);
                ctx.drawImage (img3, 450, 325);

                ctx.textBaseline = 'bottom';
                ctx.font         = 'bold 30px sans-serif';
                ctx.fillStyle   = '#671420';
                ctx.fillText ('InRoads Manuals', 60, 30);

                ctx.fillStyle    = '#000';
                ctx.font         = 'italic bold 16px sans-serif';
                ctx.textBaseline = 'top';
                ctx.fillText  ('MJM Consulting has published several InRoads training', 80, 60);
                ctx.fillText  ('manuals that have been used all over the world.  We have', 90, 80);
                ctx.fillText  ('utilized our training manuals in all of our on-site trainings', 100, 100);
                ctx.fillText  ('for dozens of civil engineering firms and Department of', 105, 120);
                ctx.fillText  ('Transportations.  Our manuals were one of the first to follow', 110, 140);
                ctx.fillText  ('a typical civil design project format.  Our manuals are easy', 115, 160);
                ctx.fillText  ('to follow and contain a cd with a self-installing data set.', 115, 180);
                ctx.fillText  ('While our manuals are listed on other sites such as Amazon.com,', 115, 220);
                ctx.fillText  ('ordering direct from us is the only place you will get a', 110, 240);
                ctx.fillText  ('full color version of the manual.', 105, 260);

            }
        }
    }
4

1 に答える 1

11

画像の読み込みが完了するのを待っていないからです。

var img = new Image();   // Create new img element
img.onload = function(){
  // execute drawImage statements here
};
img.src = 'myImage.png'; // Set source path

描画を試みる前に、各画像に対して onload イベントが発生していることを確認してください。複数の画像があり、何かを複雑にしたくない場合は、pxloaderなど、これを行うライブラリがあります。

于 2012-03-21T00:56:09.197 に答える