我想将图像放在HTML5画布中。我找到了一些有效的示例代码，但是当我实际上只需要1个图像时，该图像被加载了2次。我可以使用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../>节点，然后将其重新绘制到画布上。
只需删除<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);
}
图像被绘制了两次，因为您首先创建了节点，然后将其重新绘制到画布上。但是使用上面的代码图像无法缩放使用以下代码在画布上绘制图像并响应画布]
<div id="worldmap" style="height=100%;width=100%"><canvas id="myStaticMap"></canvas><div>
var canvas = document.getElementById("myStaticMap"),
ctx = canvas.getContext("2d");
canvas.width = $("#worldmap").width();
canvas.height = $("#worldmap").height();
ctx.drawImage(mapImage, 0, 0, canvas.width, canvas.height);
canvas.height =高度；ctx.drawImage（mapImage，0，0，width，height）;
canvas.height =高度；ctx.drawImage（mapImage，0，0，width，height）;