javascript - 如何隐藏 Canvas 或任何其他对象？

Question

这个问题已经有答案了:

Show/hide 'div' using JavaScript (15 个回答)

已关闭 3 年前。

所以我有一个主 Canvas ，上面有三个 Canvas 。和一段文字。

<canvas id="Background" width="350" height="300"
style="border:6px solid black; position: absolute; left: 10px; top: 10px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1" width="50" height="50"
style="border:6px solid yellow; position: absolute; left: 33px; top: 200px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1" width="150" height="100"
style="border:6px solid blue; position: absolute; left: 243px; top: 20px;">
</canvas>

</div>
<div style="position: absolute; left: 70px; top: 50px;">
<p> example </p>
</div>

稍后我会添加onclick事件，当我单击时，我希望文本和其中一张 Canvas 消失。基本上我想知道如何在这段代码中显示/隐藏元素。谢谢!

Answer 1

使用display: none或visibility: hide。不同之处在于 display: none 会从 View 中完全删除该元素，而 visibility: hide 会保留该元素原本所在的空白空间。哪个合适取决于您的用例。

JS 看起来大致类似于 document.getElementById("Canvas1").style.display = "none";