我想在HTML5画布上显示一张图片,而不需要先把它放在屏幕上。我已经尝试过 <noscript>
但这行不通,因为这样我就无法将图片包含到我的代码中。这是我的HTML。
<html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script src="sketch.js"></script>
</body>
</html>
Here's my javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var _img = document.getElementById('id1');
var newImg = new Image().src = _img;
context.drawImage(newImg,0,0);
<img id = "tiles" src="img/tiles.png" style="display:none;">
然后显示它
document.getElementById("tiles").style.display = "block";
EDIT:
这是对问题的快速回答,但是,一个更好的方法 将创建一个班级。
.hidden {
display : none;
}
然后将其添加到元素中。
<img id = "tiles" src="img/tiles.png" class="hidden">
并将其删除以显示
var element = document.getElementById("tiles");
element.classList.remove("hidden");
背后的原因是,如果原来的显示不是块状的,这会产生问题,也一般不鼓励使用内联式。