当我将位置更改为绝对位置时，画布精灵表和触摸事件不起作用？

Question

I am developing simple game with HTML5 Canvas.我正在使用 HTML5 Canvas 开发简单的游戏。 I used sprite image for animate, when I change position to absolute its not working and also touchevents are not working on canvas object, if change position to absolute then touchevents works fine but sprite stuff not works.我将精灵图像用于动画，当我将位置更改为绝对时，它不起作用，并且touchevents也不适用于画布对象，如果将位置更改为绝对，则touchevents工作正常但精灵的东西不起作用。

What might be the problem.可能是什么问题。 Here is my JavaScript code.这是我的 JavaScript 代码。

Here is my whole code这是我的全部代码

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/jquery_v1.9.1.js"></script>
    <script type="text/javascript">
      var canvas = null;
      var img = null;
      var ctx = null;
      var antX = 0,
        antY = 0;
      var canvasX = 0,
        canvasY = 0;
      var imageReady = false;
      var img;
      function onload() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

        img = document.getElementById("bg");
        img.onload = loaded();
        resize();

        canvas.addEventListener("touchstart", doTouchStart, false);
        document.addEventListener("click", function (e) {
          if (!e) var e = e;
          // e2.preventDefault();
          canvasX = e.pageX - canvas.offsetLeft;
          console.log("[mouseXY event] CanX array :" + canvasX);
          canvasY = e.pageY - canvas.offsetTop;
          console.log("[mouseXY event] CanY array:" + canvasY);

          //alert("X :"+canvasX+"Y :"+canvasY);

          antX = canvas.width / 2 - 48;
          antY = canvas.height / 2 - 48;
          //alert("X :"+antX+"Y :"+antY);

          if (canvasX >= antX - 40 && canvasX <= antX + 40) {
            // Is touchY between (antY - 10) and (antY + 10)?
            if (canvasY >= antY - 40 && canvasY <= antY + 40) {
              // The user touched the ant
              alert("Touched on image");
            }
          }
        });
      }

      function doTouchStart() {
        alert("T");
      }
      function select_element() {
        var offset = $div.offset();
        var x = ev.clientX - offset.left;
        var y = ev.clientY - offset.top;
        alert("X :" + x + "Y :" + y);
      }
      function loaded() {
        /* document.getElementById('divId').style.width = canvas.width / 2 - 48;
document.getElementById('divId').style.height = canvas.height / 2 - 48;
document.getElementById('divId').style.zIndex = "999"; */
        //document.getElementById('divId');

        imageReady = true;
        setTimeout(update, 1000 / 60);
      }
      function resize() {
        canvas.width = canvas.parentNode.clientWidth;
        canvas.height = canvas.parentNode.clientHeight;
        redraw();
      }
      function redraw() {
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        if (imageReady) {
          ctx.drawImage(
            img,
            frame * 192,
            0,
            192,
            192,
            canvas.width / 2 - 48,
            canvas.height / 2 - 48,
            192,
            192
          );
        }
      }

      var frame = 0;
      function update() {
        //console.log('hi');
        redraw();
        frame++;
        if (frame >= 2) frame = 0;
        setTimeout(update, 1000 / 10);
      }
    </script>
  </head>
  <body
    onresize="onresize()"
    onload="onload()"
    style="position: absolute; padding: 0; margin: 0; height: 100%; width: 100%"
  >
    <img
      class="clickable"
      alt="simple1"
      id="bg"
      src="img/blink.png"
      style="position: absolute; display: none; z-index: 1"
    />
    <canvas id="gameCanvas" style="position: absolute"></canvas>
  </body>
</html>

Any help would be much appreciated.任何帮助将非常感激。

Answer 1

如果您尝试，它是否有效：

<canvas id="can" style="position:absolute; z-index:999;">

当我将位置更改为绝对位置时，画布精灵表和触摸事件不起作用？

问题描述

1 个解决方案

解决方案1
0 2013-12-16 12:26:52

当我将位置更改为绝对位置时，画布精灵表和触摸事件不起作用？

问题描述

1 个解决方案

解决方案1 0 2013-12-16 12:26:52

解决方案1
0 2013-12-16 12:26:52