Обработка JS поверх HTML-элемента?

В настоящее время я использую Обработку JS с элементом холста HTML на веб-сайте. Намерение состоит в том, чтобы обработать JS в верхней части HTML-элементов на странице. Сайт [usandthings.com] [1] (должно быть довольно очевидно, что я пытаюсь сделать, посмотрев на сайт - протрите черный цвет, чтобы показать белый фон, показывая html-текст). ОДНАКО, поскольку вы видите, что он очень медленный - он работает плавно, когда он не находится над каким-либо html, однако, когда вы перетаскиваете его по тексту, он работает очень медленно и на самом деле не работает. В любом случае, я могу обойти это?Обработка JS поверх HTML-элемента?

Edited - это самый простой способ показать, что я имею в виду:

<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. Другими словами, ваш эскиз обработки не работает медленно, он просто не получает события.

Вы можете установить z-индекс вашего блока  и/или ваш эскиз обработки с использованием CSS, чтобы эскиз обработки был поверх текста html, но тогда вам также нужно будет настроить эскиз обработки на прозрачный , а затем использовать что-то вроде PGraphics в качестве маски. Это выполнимо, но для этого потребуется пересмотр кода обработки.

Другой вариант - просто установить блок , чтобы не принимать события мыши. Вы можете сделать это, добавив следующую строку в CSS вашего  блока:

pointer-events:none;

С, что на месте события мыши будет правильно «провалиться» на свою Обработку эскиз.

источник

2015-04-22 16:06:33

Вот обновленный Fiddle с исправлением. https://jsfiddle.net/e5y870ru/1/ – Radio

ответ

Смежные вопросы