javascript - 如何在页面上没有图像的情况下在 HTML5 Canvas 上使用图像？

Question

关于W3 Schools HTML5 Canvas Image Page , 他们使用 <img>在他们加载 Canvas 之前在页面上标记。他们的代码如下。

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
}
</script>

我有一张 map (作为图像)已加载到我需要使用的服务器上，但我找不到在 Canvas 上只显示一个图像的方法。例如... 左边的是我正在使用的图像，但我需要它才能让右边的图像( Canvas )工作。

有什么建议吗？

Answer 1

使用JS创建图片

如果您知道图像的路径，或者可以提供它，则可以使用以下内容创建图像。重要的是要注意图像确实需要时间来加载，并且您不能在图像加载之前成功使用它。

window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  var img = document.createElement("img");

  img.onload = function() {
    ctx.drawImage(img, 10, 10);
  }

  // triggers onload event (after it loads of course)
  img.src = "//via.placeholder.com/350x150";

}

<p>Canvas:</p>
<canvas id="myCanvas" width="370" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>