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

回答

相關問題