0

我正在构建一个具有全屏背景的网页，该网页是在固定位置的全屏 html5 画布上执行的处理构建的。在这个画布上，我放置了一些按预期显示的 div。当我的 Processing 动画响应 mouseX 和 mouseY 用户交互时，我不得不将 jQuery .mousemovex 和 y 变量传递给我的草图，因为当我使用 Processing 的 mouseX 和 mouseY 时，每次光标在 div 上时，动画都会停止，从而解决了我的问题。在桌面 FF、Chrome 和 Safari 上效果很好，但在 iPad 上，如果显示 div，无论我使用的是 jQuery.mousemove还是 Processing ，我都无法让画布识别 mouseXmouseX和mouseY 坐标mouseY. 我尝试摆脱所有 div 并且草图按预期工作。我也尝试过使用 CSS pointer-events:none;，但没有奏效，当然，所有链接也停止工作。任何人都可以帮忙吗？为什么在 iPad 上会发生这种情况，而在桌面上一切正常？

这是我的代码示例：

HTML

<body>

<!-- Background P5 Canvas -->
<canvas id="p5can" data-processing-sources="noise/noise.pde"></canvas>

<header>

    <div id="name">XXXX</div>

    <div id="project-name">XXXX</div>

</header>

<div class="wrapper">

    <div id="disclaimer">XXXX</div>

    <div id="built"><a href="xxxx" href="_blank">xxxx</a></div>

    <div id="about-me-shooter">About me_</div>

    <div id="contact-me-shooter">Contact me_</div>

</div><!-- Wrapper -->

CSS

canvas {
position: fixed;
}

header {
position: fixed;
top: 25px;
left: 0;
width: 1120px;
height: 150px;
z-index: 10;
}

.wrapper {
width: 1208px;
position: absolute;
top: 0;
left: 0;
z-index: 9;
}

PDE 文件示例

float t = 0;

void setup() {

  background(#bdbdbd);
  size(window.innerWidth, window.innerHeight);
  smooth();

}

void draw() {

  float x = mouseX;
  while (x < width) {
      line(x, mouseY * noise(x, t), x + 60, (mouseY + 60) * noise(x, t));
      x = x + 1;
  }

  t = t + 0.01;

}
4

1 回答 1

0

解决方案非常简单......我花了几个小时才找到它！似乎 iPad 上的 Chrome 和 Safari 需要在 CSS 上声明画布大小，否则在画布顶部添加 div 时它将不起作用。是否在 PDE 文件中声明大小无关紧要。所以添加width:100%和height:100%画布对象解决了我的问题。希望这可以帮助其他有同样问题的人:)

于 2013-04-14T17:32:46.503 回答