如何在 canvas (HTML/JS) 上嵌入图像

Question

我正在尝试将图像嵌入到 canvas 中，以便我可以使用 canvas 在图像上绘制线条。 但是，我似乎无法让图像出现在 canvas 中。 这是我的代码（HTML 然后 JS）：

<canvas id="myCanvas"  style="border:1px solid #d3d3d3; position: relative; z-index:3; top:10em; width: 30em; height: 20em; left: 22em;"></canvas>
    <img src="mapfinal.png" id="mapPic" style="display: none;"/>

javascript

        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        var map = document.getElementById("mapPic");
        ctx.drawImage(map, 20, 20);

非常感谢您的帮助！

Answer 1

这可能是两件事之一。 最可能的问题是在您尝试绘制图像之前尚未加载图像。 要解决此问题，请向img元素添加一个onload事件侦听器，以便在图像加载后绘制它。

<img src="mapfinal.png" id="mapPic" onload="drawCanvas" style="display: none;"/>

<script>
function drawCanvas() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  var map = document.getElementById("mapPic");
  ctx.drawImage(map, 20, 20);
}
</script>

另一个问题可能是由于img元素设置为display: none 浏览器根本没有加载图像。 根据浏览器的不同，它可能会或可能不会加载它。 如果您不希望图像显示更好的方法是通过 JavaScript 创建它。

var map = new Image();
map.onload = function() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(map, 20, 20);
};
map.src = 'mapfinal.png';