javascript画布不绘制图像答案

【问题标题】：javascript canvas doesn't draw imagesjavascript画布不绘制图像
【发布时间】：2014-02-20 16:02:20
【问题描述】：

我正在使用 cordova 为 android 开发混合 javascript 应用程序。
在以下代码中，我使用两种方式在画布上绘制图像：使用 setTimeout 和不使用。
android设备上的以下代码（用cordova包装）不会对func1作出反应，但会对func2作出反应。第二次点击func1 最终在画布上绘制图像。这很奇怪。

我认为这与 android 设备的性能有关，因为在我的台式电脑上，这两个功能都可以正常工作。

为什么会这样？如何避免使用 setTimeout？

<html style="background: white;">
  <head>
  </head>
  <body>
    <button onclick="func1()">render img2 func1</button>
    <button onclick="func2()">render img2 func2</button><br />
    <canvas id="canv">canv</canvas>
    
    <script>
      var img = new Image();
      var canvas = document.getElementById('canv');
      canvas.width = 100;
      canvas.height = 100;
      var ctx = canvas.getContext("2d");
        
      function setSrc() {
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAASUlEQVRo3u3PAQ0AIAwDsIGC+TcLLkhOWgddSU6Ga5udT4iIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8cQEjUgGTmE6z3QAAAABJRU5ErkJggg=="
      };
        
      function drawImg() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
    
      function func1() {
        setSrc();
        drawImg();
      };
        
      function func2() {
        setSrc();
        setTimeout(function () {
          drawImg();
        }, 500);
      };
     
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript android canvas cordova settimeout

【解决方案1】：

这并不奇怪，因为图像加载是异步的。您正在尝试在图像加载之前绘制图像。在第二次单击时，图像已加载，因此将被绘制。

您需要使用回调机制来完成这项工作：

function setSrc(callback) {
    img.onload = callback;   /// when image is loaded this will be called
    img.src = 'data: ...snipped...';
};

function drawImg() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

然后稍微修改你的函数：

function func1() {
    setSrc(drawImg);  /// drawImg is now callback function for setSrc.
};

注意：例如，如果您需要在图像上绘制东西，您必须从回调函数继续您的代码。例如，还为 drawImg 函数添加一个回调，该函数在绘制图像后调用代码中的下一步。这是因为如上所述，图像加载是异步的，如果您在图像加载之前尝试绘制任何其他内容，则图像将被绘制在顶部

【讨论】：