在 HTML 元素的顶部处理 JS？答案

【问题标题】：Processing JS over the top of a HTML element?在 HTML 元素的顶部处理 JS？
【发布时间】：2015-04-22 10:16:28
【问题描述】：

我目前在网站上使用带有 HTML 画布元素的 Processing JS。目的是让 Processing JS 在页面上的 HTML 元素的顶部运行。该站点是 [usandthings.com][1]（通过查看该站点应该很明显我想要做什么 - 擦掉黑色以显示白色背景，显示 html 文本）。但是，正如您所看到的，它非常慢 - 当它不在任何 html 上时它可以顺利运行，但是当您将它拖到文本上时，它非常慢并且实际上不起作用。无论如何我可以解决这个问题吗？

已编辑 - 这是表达我的意思的最简单方式：

<html>
<head>
    <meta charset="UTF-8">
    <title>Us and Things</title>
    <script src="processing.js"></script>
    <script type="text/javascript" src="jquery.js"></script>

<body>

<style> 
body {
height: 100%;
width: 100%;
overflow: hidden;
background: white;
}
p {
text-align: center;
position: absolute;
color: black;
width: auto;
font-size: 4em;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 10%;
}
</style>

<div class = "thecanvas">
<canvas id = "mycanvas"></canvas>
</div>

<p class = text>
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE 
TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
</p>


<script type="text/processing" data-processing-target="mycanvas">


void setup() {
size(2000, 2000);
background(0);
frameRate(250);
}

void draw() {
stroke(255);
strokeWeight(130);
strokeCap(ROUND);
line(mouseX, mouseY, pmouseX, pmouseY);
}

void mousePressed() {
background(0);
}

</script>

</body>
</html>

【问题讨论】：

为什么这个问题被否决了？当然，这是一个合理的问题......
它可能被否决了，因为我们不能真正重复这个问题。如果你发布一个MCVE，你会有更好的运气-也许发布一个我们需要的所有文件的 .zip？
为混乱的代码道歉 - 我已经上传了一个更简单的版本。
我很好奇，所以我为这个jsfiddle.net/e5y870ru 创建了一个小提琴，并尝试了一些“技巧”，例如 translate z hack，但没有任何效果。这一定是由于一些用于欺骗背景的内部 processing.js 代码或其他原因，因为我不明白为什么会这样。我会尝试直接用javascript和canvas来做这个，看看是否更好。
@KevinWorkman 我没想过检查 z-index 并假设他的代码正在删除像素，而不是重新绘制。一切都说得通。我更新了小提琴并加上了你的答案。 jsfiddle.net/e5y870ru/1

标签： javascript css canvas processing processing.js

【解决方案1】：

发生这种情况是因为您的 html  块实际上是 在处理草图的顶部（前面）。

这会导致 块“吸收”鼠标事件，因此当您超过 html 文本时，您的处理草图不会收到它们。换句话说，您的处理草图并没有运行缓慢，它只是没有收到事件。

您可以使用 CSS 设置  块和/或处理草图的 z-index，以便处理草图位于 html 文本之上，但是您还必须将处理草图设置为透明的，然后使用 PGraphics 之类的东西作为遮罩。这是可行的，但需要彻底检查您的处理代码。

另一种选择是将 块设置为不接收鼠标事件。为此，您可以将此行添加到  块的 CSS：

pointer-events:none;

有了这个，鼠标事件将正确地“落入”您的处理草图。

【讨论】：