如何在HTML中加入图片而不在屏幕上显示出来?

问题描述 投票:0回答:1

我想在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);
html
1个回答
2
投票
    <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");

背后的原因是,如果原来的显示不是块状的,这会产生问题,也一般不鼓励使用内联式。

© www.soinside.com 2019 - 2024. All rights reserved.