在HTML元素的顶部处理JS？

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

编辑 - 这是显示我的意思的最简单的方法：

<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>

来源

2015-04-22 biscuit_

为什么这个问题被拒绝？当然，这是一个合理的问题... –

它可能已被拒绝，因为我们不能真正重复该问题。如果您发布[MCVE]（http://stackoverflow.com/help/mcve），您会有更好的运气 - 也许发布我们需要的所有文件的.zip文件。 –

混乱的代码道歉 - 我已经上传了一个更简单的版本。 –

发生这种情况，因为你的HTML 块实际上在顶部（在前面）的加工草图。

这会导致块“吸收”鼠标事件，所以当您处理顶部html文本时，Processing草图不会收到它们。换句话说，你的Processing草图运行不是很慢，它只是没有得到事件。

您可以使用CSS设置块和/或Processing草图的z索引，以便Processing草图位于html文本的顶部，但是您还必须将Processing草图设置为透明，然后使用类似于PGraphics的东西作为蒙版。这是可行的，但它需要彻底检查你的Processing代码。

另一种选择是只设置您的块不接收鼠标事件。您可以通过添加此行到您的块的CSS做到这一点：

pointer-events:none;

有了到位，鼠标事件将正确地“落空”你处理草图。

来源

2015-04-22 16:06:33

这是一个更新的小提琴与您的修复。 https://jsfiddle.net/e5y870ru/1/ – Radio

在HTML元素的顶部处理JS？

回答

相关问题