在 HTML 元素之上处理 JS？

Question

我目前在网站上使用带有 HTML canvas 元素的 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>

Answer 1

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

这会导致  阻止 "absorb" 鼠标事件，因此当您位于 html 文本上方时，您的 Processing sketch 不会接收到它们。换句话说，你的 Processing sketch 并不是运行慢，它只是没有得到事件。

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

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

pointer-events:none;

有了它，鼠标事件将正确地 "fall through" 到您的 Processing sketch。

在 HTML 元素之上处理 JS？

Processing JS over the top of a HTML element?

javascript

css

processing

canvas

processing.js