Question

我想将图片放在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>

Answer 1

图像被绘制两次，因为您先创建<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);
}

Answer 2

图像绘制了两次，因为先创建节点，然后将其重新绘制到画布上。但是使用上面的代码图像无法缩放使用以下代码在画布上绘制图像并响应画布

<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);

没有2次加载的html / javascript画布drawImage

2 个答案: