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

我想在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");

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何创建不同物种群的排序图。

2022-9-8 12:17:36

未分类

只为对象的某些属性创建一个类型。

2022-9-8 12:17:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索