如何解决p5画布覆盖的元素
我正在使用p5创建一个可以在其中绘制内容的画布,但是当我尝试在其下放置文本时,它始终位于画布后面。我只能通过在CSS文件中人为地更改宽度和高度来为笔记本电脑解决此问题。该修复程序仅对我的笔记本电脑有效。
我在HTML文件的div中放置了p5 canvas元素,但是当我在chrome上的dev工具中查看elements选项卡时,它说div高度等于0。我有一种感觉是因为HTML首先加载js吗?我正在为我的createCanvas()使用userWidth。如下所示:
function setup() {
const canvas = createCanvas(userWidth,userWidth/1.8).center('horizontal');
canvas.parent('canvas');
}
HTML文件(在正文标签下):
<div id = 'canvas'>
<!-- canvas will go here -->
</div>
<div>
<p id = 'textarea'>
<!-- text added using DOM innerHTML -->
</p>
</div>
我该如何解决?
解决方法
我最终将文本的'div'和'p'标签放置在与画布相同的div中。我不太确定为什么行得通,但确实行得通。我仍然必须编辑CSS文件的顶部填充以模拟宽度与高度的比率,宽度为100%。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。