HTML5 canvas drawImage не работает при первом клике - PullRequest
Новая
       11

HTML5 canvas drawImage не работает при первом клике

2 голосов
/ 21 марта 2012

У меня есть холст, на котором я использую функцию javascript для отображения текста и нескольких изображений.Проблема, с которой я сталкиваюсь, заключается в том, что щелчок выполняет функцию и отображает текст, но не всегда размещает изображения.Если щелкнуть второй раз, изображения появятся.Такое поведение одинаково во всех браузерах.Команда не медленная, она просто не отображает изображения с первого раза.TIA 

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

            }
        }
    }

1 Ответ

9 голосов
/ 21 марта 2012

Поскольку вы не ждете окончания загрузки изображений. 

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

Убедитесь, что событие onload сработало для каждого изображения, прежде чем пытаться рисовать. Если у вас есть несколько изображений и вы не хотите делать что-то сложное, то есть библиотеки, которые делают это за вас, например pxloader .

...