Question

我写了几行代码来绘制图像但似乎一直在加载，我尝试了一些使用基本实现的W3学校代码，但工作正常。

这里发生的事情似乎是它卡在一些看不见的循环中，无法绘制图像。

UPDATE wrkque
SET locacc = (SELECT locmst.locacc
            FROM locmst,
                 wrkque
           WHERE locmst.stoloc = wrkque.srcloc
             AND wrkque.oprcod = 'TRN')
WHERE wrkque.oprcod = 'TRN'
AND wrkque.srcloc IN (SELECT locmst.stoloc
                        FROM locmst,
                             wrkque
                       WHERE locmst.stoloc = wrkque.srcloc)

Answer 1

我用console.log（）替换了你的document.write（），它运行正常：

var canvas = null;
var context = null;

var setup = function() {
  canvas = document.getElementById("my_canvas");
  context = canvas.getContext('2d');
  canvas.width = 1200;
  canvas.height = 720;
  img = new Image();
  img.onload = onImageLoad;
  img.src = "http://imgge.bg.ac.rs/images/logo1.jpg";
  context.drawImage(img, 192, 192);
};

onImageLoad = function() {
  console.log("done !!");
  context.drawImage(img, 155, 10);
};

setup();

<canvas id="my_canvas"></canvas>

由于document.write（）导致画布不显示的原因，请阅读document.write() overwriting the document?

由于浏览器缓存了img，您可能会注意到第一次和连续运行之间存在差异。可以立即在setup()函数中绘制缓存的图像。

Answer 2

首先，您不需要在context.drawImage(img,192,192);函数内写两次image.onload()。当您使用document.write("Done !");编写任何内容时，它会在此文档（HTML）页面上编写内容并可能会产生问题。而不是在<p>标签上而不是在整个文档上写入消息。

这是代码的代码段：

var canvas=null;
var context=null;
setup=function(){
    canvas=document.getElementById("my_canvas");
    context=canvas.getContext('2d');
    canvas.width=1200;
    canvas.height=720;
    img=new Image();
    img.onload=onImageLoad;
    img.src="http://imgge.bg.ac.rs/images/logo1.jpg";
    //context.drawImage(img,192,192);
    };
    onImageLoad=function(){        
        context.drawImage(img,155,10);
      document.getElementById("report").innerHTML="Done !";
    };
setup();

<canvas id="my_canvas"></canvas>
<p id="report"></p>

画布元素无法绘制图像

2 个答案: