gpt4 book ai didi

html - 如何在 HTML 中包含图像而不在屏幕上显示它

转载 作者:行者123 更新时间:2023-12-04 10:09:28 25 4
gpt4 key购买 nike

我想在 HTML5 Canvas 上显示图像而不先将其放在屏幕上。我试过 <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";

编辑:

这是对问题的快速回答,但是更好的方法是创建一个类
 .hidden {
display : none;
}

然后将其添加到元素中。
<img id = "tiles" src="img/tiles.png" class="hidden">

并将其删除以显示
 var element = document.getElementById("tiles");
element.classList.remove("hidden");

这背后的原因是,如果原始显示不是阻塞的,这会产生问题,而且通常不鼓励使用内联样式。

关于html - 如何在 HTML 中包含图像而不在屏幕上显示它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61399077/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com