HTML5 canvas drawImage不工作的第一次点击 [英] HTML5 canvas drawImage not working on first click

问题描述

我有一个画布，我使用javascript函数显示文本和几个图像。我遇到的问题是，点击会执行该功能并显示文本，但并不总是放置图像。如果再次单击，将显示图像。此行为在所有浏览器中一致。命令不慢，它只是无法第一次显示图像。 TIA

  // JavaScript文档
 
 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; 
 
 //清除画布
 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已发布多个InRoads训练'，80,60）; 
 ctx.fillText（'已经在世界各地使用的手册，我们有'，90，80）; 
 ctx.fillText（'在我们所有的现场培训中使用我们的培训手册'，100，100）; 
 ctx.fillText（'用于几十个土木工程公司和'105，120）; 
 ctx.fillText（'Transportations。我们的手册是第一个关注的'，110,140）; 
 ctx.fillText（'典型的土木设计项目格式。我们的手册很容易'，115，160）; 
 ctx.fillText（'跟随并包含带有自安装数据集的cd。'，115，180）; 
 ctx.fillText（'我们的手册列在其他网站如Amazon.com，'，115，220）; 
 ctx.fillText（'从我们直接订购是唯一的地方，你会得到'，110，240）; 
 ctx.fillText（'full color version of the manual。'，105，260）; 
 
} 
} 
} 
  

方案

因为你不等待图片完成加载。

  var img = new Image （）; //创建新的img元素
 img.onload = function（）{
 //在这里执行drawImage语句
}; 
 img.src ='myImage.png'; //设置源路径
  

确保每个图像在尝试绘制之前已触发onload事件。如果您有多个图片，并且不想使复杂的图片，那么有库为这样做，如 pxloader 。 / p>

I have a canvas that I am using a javascript function to display text and a couple of images. The issue that I am running into is that the click does perform the function and displays the text, but does not always place the images. If clicked a second time, the images appear. This behavior is consistent in all browsers. The command is not slow, it just fails to display the images the first time. 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);

            }
        }
    }

解决方案

Because you're not waiting for the images to finish loading.

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

Make sure the onload event has fired for each image before trying to draw. If you have multiple images and don't want to make something complicated then there are libraries that do this for you, such as pxloader.

这篇关于HTML5 canvas drawImage不工作的第一次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！