Question

我正在使用HTML5 Canvas开发简单的游戏。我使用精灵图像进行动画制作，当我将位置更改为绝对不能正常工作时，touchevents也无法处理画布对象，如果chage位置为绝对然后touchevents工作正常但精灵内容不起作用。可能是什么问题。这是我的javascript代码这是我的整个代码

<!doctype html>
<html>
 <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>

非常感谢任何帮助

Answer 1

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

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

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

1 个答案: