我想将图像放置在 HTML5 Canvas 中。我找到了一些有效的示例代码，但图像加载了 2 次，而我实际上只需要 1 次。我可以使用 JavaScript 或 CSS 隐藏其中一个图像，但我正在寻找一种图像只需要加载一次的方法.
<!DOCTYPE html>
<html>
<body>
<img id="img" src="img.png" width="150px" height="150px">
<canvas id="canvas" width="200px" height="200px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("img");
ctx.drawImage(img, 0, 0);
</script>
</body>
</html>
最佳答案
图像绘制了两次，因为您创建了 <img../>首先节点，然后将其重新绘制到 Canvas 上。
只需删除 <img id="img" src="img.png" width="150px" height="150px">并将其添加到您的 JavaScript 代码中:
img = new Image();
img.src = 'img.png';
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
关于javascript - html/javascript Canvas drawImage无需2次加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27531811/